<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>react - 肉蛋葱鸡肉粥🍛的博客☕</title><meta name="Description" content=""><meta property="og:title" content="react" />
<meta property="og:description" content="React入门 相关js库 1.react.js：React核心库 2.react-dom.js：提供操作DOM的react扩展库 3.babel." />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://example.org/posts/react/" /><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2021-08-15T10:42:53+08:00" />
<meta property="article:modified_time" content="2021-08-15T10:42:53+08:00" /><meta property="og:site_name" content="肉蛋葱鸡肉粥🍛的博客☕" />

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="react"/>
<meta name="twitter:description" content="React入门 相关js库 1.react.js：React核心库 2.react-dom.js：提供操作DOM的react扩展库 3.babel."/>
<meta name="application-name" content="肉蛋葱鸡肉粥🍛的博客☕">
<meta name="apple-mobile-web-app-title" content="肉蛋葱鸡肉粥🍛的博客☕"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="http://example.org/posts/react/" /><link rel="prev" href="http://example.org/posts/webpack/" /><link rel="next" href="http://example.org/posts/react&#43;ts/" /><link rel="stylesheet" href="/lib/normalize/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="/lib/fontawesome-free/all.min.css"><link rel="stylesheet" href="/lib/animate/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "react",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "http:\/\/example.org\/posts\/react\/"
        },"genre": "posts","keywords": "react, react路由, redux","wordcount":  13517 ,
        "url": "http:\/\/example.org\/posts\/react\/","datePublished": "2021-08-15T10:42:53+08:00","dateModified": "2021-08-15T10:42:53+08:00","publisher": {
            "@type": "Organization",
            "name": "yzuxqz"},"author": {
                "@type": "Person",
                "name": "yzuxqz"
            },"description": ""
    }
    </script></head>
    <body header-desktop="" header-mobile=""><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : '' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/" title="肉蛋葱鸡肉粥🍛的博客☕">肉蛋葱鸡肉粥🍛的博客☕</a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/posts/"> 文章 </a><a class="menu-item" href="/tags/"> 标签 </a><a class="menu-item" href="/categories/"> 分类 </a><a class="menu-item" href="/about/"> 关于 </a><span class="menu-item delimiter"></span><a href="javascript:void(0);" class="menu-item language" title="选择语言">简体中文<i class="fas fa-chevron-right fa-fw"></i>
                        <select class="language-select" id="language-select-desktop" onchange="location = this.value;"><option value="/posts/react/" selected>简体中文</option></select>
                    </a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/" title="肉蛋葱鸡肉粥🍛的博客☕">肉蛋葱鸡肉粥🍛的博客☕</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><a class="menu-item" href="/posts/" title="">文章</a><a class="menu-item" href="/tags/" title="">标签</a><a class="menu-item" href="/categories/" title="">分类</a><a class="menu-item" href="/about/" title="">关于</a><a href="javascript:void(0);" class="menu-item theme-switch" title="切换主题">
                <i class="fas fa-adjust fa-fw"></i>
            </a><a href="javascript:void(0);" class="menu-item" title="选择语言">简体中文<i class="fas fa-chevron-right fa-fw"></i>
                    <select class="language-select" onchange="location = this.value;"><option value="/posts/react/" selected>简体中文</option></select>
                </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">react</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="https://github.com/yzuxqz" title="Author" target="_blank" rel="noopener noreffer author" class="author"><i class="fas fa-user-circle fa-fw"></i>yzuxqz</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/react/"><i class="far fa-folder fa-fw"></i>react</a>&nbsp;<a href="/categories/%E5%89%8D%E7%AB%AF/"><i class="far fa-folder fa-fw"></i>前端</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-08-15">2021-08-15</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 13517 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 27 分钟&nbsp;</div>
        </div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#相关js库">相关js库</a></li>
    <li><a href="#创建虚拟dom的两种方式">创建虚拟DOM的两种方式</a>
      <ul>
        <li><a href="#使用jsx创建虚拟dom">使用jsx创建虚拟DOM</a></li>
        <li><a href="#使用js创建虚拟dom">使用js创建虚拟DOM</a></li>
      </ul>
    </li>
    <li><a href="#关于虚拟dom">关于虚拟DOM</a></li>
    <li><a href="#jsx语法规则">JSX语法规则</a></li>
    <li><a href="#js表达式与js语句">JS表达式与JS语句</a>
      <ul>
        <li><a href="#表达式">表达式</a></li>
        <li><a href="#语句代码">语句(代码)</a></li>
      </ul>
    </li>
  </ul>

  <ul>
    <li><a href="#模块与组件">模块与组件</a>
      <ul>
        <li><a href="#模块">模块</a></li>
        <li><a href="#组件">组件</a></li>
      </ul>
    </li>
    <li><a href="#模块化与组件化">模块化与组件化</a>
      <ul>
        <li><a href="#模块化">模块化</a></li>
        <li><a href="#组件化">组件化</a></li>
      </ul>
    </li>
    <li><a href="#react中定义组件">React中定义组件</a>
      <ul>
        <li><a href="#函数式组件">函数式组件</a></li>
        <li><a href="#类式组件">类式组件</a></li>
      </ul>
    </li>
    <li><a href="#组件实例的三大属性">组件实例的三大属性</a>
      <ul>
        <li><a href="#state">state</a>
          <ul>
            <li><a href="#获取state中的值">获取state中的值</a>
              <ul>
                <li><a href="#类中方法中的this">类中方法中的this</a></li>
                <li><a href="#react组件类中的this">React组件类中的this</a></li>
                <li><a href="#如何解决">如何解决</a></li>
              </ul>
            </li>
            <li><a href="#修改state中的值">修改state中的值</a></li>
            <li><a href="#state的简写形式">state的简写形式</a></li>
          </ul>
        </li>
        <li><a href="#props">props</a>
          <ul>
            <li><a href="#props的基本使用">props的基本使用</a></li>
            <li><a href="#props批量传递">props批量传递</a></li>
            <li><a href="#对props进行限制">对props进行限制</a></li>
            <li><a href="#props简写">props简写</a></li>
            <li><a href="#函数式组件使用props">函数式组件使用props</a></li>
          </ul>
        </li>
        <li><a href="#refs与事件处理">refs与事件处理</a>
          <ul>
            <li><a href="#string类型的ref已过时">string类型的ref（已过时）</a></li>
            <li><a href="#回调函数形式的refs">回调函数形式的refs</a>
              <ul>
                <li><a href="#内联的写法开发常用">内联的写法（开发常用）</a></li>
                <li><a href="#class绑定的函数形式">class绑定的函数形式</a></li>
              </ul>
            </li>
            <li><a href="#createref的使用">createRef的使用</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#组件通信">组件通信</a>
      <ul>
        <li><a href="#父传子">父传子</a></li>
        <li><a href="#子传父">子传父</a></li>
        <li><a href="#爷孙传值">爷孙传值</a></li>
        <li><a href="#兄弟传值">兄弟传值</a>
          <ul>
            <li><a href="#消息订阅-发布机制">消息订阅-发布机制</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#react中的构造器">React中的构造器</a></li>
    <li><a href="#react中的事件绑定">React中的事件绑定</a></li>
    <li><a href="#react中的事件处理">React中的事件处理</a></li>
    <li><a href="#非受控组件">非受控组件</a></li>
    <li><a href="#受控组件推荐">受控组件（推荐）</a></li>
    <li><a href="#柯里化">柯里化</a></li>
    <li><a href="#生命周期">生命周期</a>
      <ul>
        <li><a href="#生命周期旧">生命周期（旧）</a></li>
        <li><a href="#父组件的生命周期旧">父组件的生命周期(旧)</a></li>
        <li><a href="#生命周期新">生命周期（新）</a>
          <ul>
            <li><a href="#getsnapshotbeforeupdate的应用">getSnapshotBeforeUpdate的应用</a></li>
          </ul>
        </li>
        <li><a href="#dom的diffing算法">DOM的diffing算法</a></li>
      </ul>
    </li>
  </ul>

  <ul>
    <li><a href="#项目结构">项目结构</a></li>
    <li><a href="#开发流程">开发流程</a></li>
    <li><a href="#样式的模块化">样式的模块化</a></li>
    <li><a href="#todolist案例">todolist案例</a></li>
    <li><a href="#github搜索案例">github搜索案例</a></li>
    <li><a href="#配置代理解决跨域">配置代理解决跨域</a>
      <ul>
        <li><a href="#方法一">方法一</a></li>
        <li><a href="#方法二">方法二</a></li>
      </ul>
    </li>
  </ul>

  <ul>
    <li><a href="#react-router-dom基本使用">react-router-dom基本使用</a></li>
    <li><a href="#路由组件与一般组件">路由组件与一般组件</a></li>
    <li><a href="#withrouter函数">withRouter函数</a></li>
    <li><a href="#navlink的使用">NavLink的使用</a>
      <ul>
        <li><a href="#navlink的二次封装">NavLink的二次封装</a></li>
      </ul>
    </li>
    <li><a href="#switch的使用">switch的使用</a></li>
    <li><a href="#解决样式丢失">解决样式丢失</a></li>
    <li><a href="#路由的严格匹配与模糊匹配">路由的严格匹配与模糊匹配</a></li>
    <li><a href="#redirect组件的使用">Redirect组件的使用</a></li>
    <li><a href="#嵌套路由">嵌套路由</a></li>
    <li><a href="#路由传参">路由传参</a>
      <ul>
        <li><a href="#params参数">params参数</a></li>
        <li><a href="#search参数">search参数</a></li>
        <li><a href="#state参数">state参数</a></li>
        <li><a href="#区别">区别</a></li>
      </ul>
    </li>
    <li><a href="#push与replace">push与replace</a></li>
    <li><a href="#编程式路由导航">编程式路由导航</a></li>
  </ul>

  <ul>
    <li><a href="#流程">流程</a></li>
    <li><a href="#异步action">异步action</a></li>
    <li><a href="#redux-thunk">redux-thunk</a></li>
    <li><a href="#react-redux">react-redux</a>
      <ul>
        <li><a href="#react-redux的基本使用">React-redux的基本使用</a></li>
        <li><a href="#容器中连接store和ui组件">容器中连接store和ui组件</a></li>
        <li><a href="#ui组件中使用">ui组件中使用</a></li>
        <li><a href="#流程总结">流程总结：</a></li>
        <li><a href="#优化">优化</a></li>
      </ul>
    </li>
    <li><a href="#数据共享">数据共享</a></li>
    <li><a href="#纯函数">纯函数</a></li>
    <li><a href="#redux开发者工具">redux开发者工具</a></li>
  </ul>

  <ul>
    <li><a href="#nanoid">nanoid</a></li>
    <li><a href="#pubsub-js">pubsub-js</a></li>
    <li><a href="#antd">antd</a></li>
    <li><a href="#store">store</a></li>
    <li><a href="#react-router-dom">react-router-dom</a></li>
    <li><a href="#redux-1">redux</a></li>
    <li><a href="#redux-thunk-1">redux-thunk</a></li>
    <li><a href="#react-redux-1">react-redux</a></li>
  </ul>

  <ul>
    <li><a href="#登录状态保持和权限验证">登录状态保持和权限验证</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><h1 id="react入门">React入门</h1>
<h2 id="相关js库">相关js库</h2>
<p>1.react.js：React核心库</p>
<p>2.react-dom.js：提供操作DOM的react扩展库</p>
<p>3.babel.min.js：解析JSX语法代码转为JS代码库</p>
<p>4.prop-types.js：用于对组件标签属性进行限制</p>
<h2 id="创建虚拟dom的两种方式">创建虚拟DOM的两种方式</h2>
<h3 id="使用jsx创建虚拟dom">使用jsx创建虚拟DOM</h3>
<ul>
<li>不写引号，直接写标签</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/babel&#34;</span><span class="p">&gt;</span>
  <span class="c1">//1. 创建虚拟dom
</span><span class="c1"></span>  <span class="kr">const</span> <span class="nx">VDOM</span> <span class="o">=</span> <span class="o">&lt;</span><span class="nx">h1</span> <span class="nx">id</span><span class="o">=</span><span class="s2">&#34;title&#34;</span><span class="o">&gt;</span><span class="nx">Hello</span><span class="p">,</span><span class="nx">React</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
  <span class="c1">//2. 渲染虚拟dom到页面
</span><span class="c1"></span>  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">VDOM</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="使用js创建虚拟dom">使用js创建虚拟DOM</h3>
<ul>
<li>React.createElement（标签名，标签属性，标签内容），==一般不用====，因为嵌套过于麻烦==</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/javascript&#34;</span><span class="p">&gt;</span>
  <span class="c1">//1. 创建虚拟dom
</span><span class="c1"></span>  <span class="kr">const</span> <span class="nx">VDOM</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;h1&#39;</span><span class="p">,{</span><span class="nx">id</span><span class="o">:</span><span class="s1">&#39;title&#39;</span><span class="p">},</span><span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;span&#39;</span><span class="p">,{},</span><span class="s1">&#39;内容&#39;</span><span class="p">))</span>
  <span class="c1">//2. 渲染虚拟dom到页面
</span><span class="c1"></span>  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">VDOM</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="关于虚拟dom">关于虚拟DOM</h2>
<ol>
<li>本质是Object类型的对象</li>
<li>虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上的那么多属性</li>
<li>虚拟DOM最终会被React转为真实DOM，呈现在页面上</li>
</ol>
<h2 id="jsx语法规则">JSX语法规则</h2>
<ol>
<li>定于虚拟DOM，不用写引号</li>
<li>标签中混入JS表达式时要用{}</li>
<li>样式的类名指定不要用class，要用className</li>
<li>内联样式要用style={{key:value}}的形式去写</li>
<li>只有一个根标签</li>
<li>标签必须闭合</li>
<li>标签首字符
<ul>
<li>若小写字母开头，则将标签改为html中同名的元素，若html中没有改标签对应的同名元素，则报错</li>
<li>若大写字母开头，react会去渲染对应的组件，若组件没有定义，则报错</li>
</ul>
</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;Angular&#39;</span><span class="p">,</span> <span class="s1">&#39;React&#39;</span><span class="p">,</span> <span class="s1">&#39;Vue&#39;</span><span class="p">]</span>
  <span class="c1">//1. 创建虚拟dom
</span><span class="c1"></span>  <span class="kr">const</span> <span class="nx">VDOM</span> <span class="o">=</span> <span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">Hello</span><span class="p">,</span><span class="nx">React</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
      <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
        <span class="p">{</span>
            <span class="c1">// map会有返回值，foreach会修改原来的数组
</span><span class="c1"></span>          <span class="nx">data</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">item</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="k">return</span> <span class="o">&lt;</span><span class="nx">li</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">index</span><span class="p">}</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">item</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
          <span class="p">})</span>
        <span class="p">}</span>
      <span class="o">&lt;</span><span class="err">/ul&gt;</span>
    <span class="o">&lt;</span><span class="err">/div&gt;</span>
  <span class="p">)</span>
  <span class="c1">//2. 渲染虚拟dom到页面
</span><span class="c1"></span>  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">VDOM</span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="js表达式与js语句">JS表达式与JS语句</h2>
<h3 id="表达式">表达式</h3>
<p>一个表达式会产生一个值，可以放在任何一个需要值得地方</p>
<ul>
<li>a</li>
<li>a+b</li>
<li>demo(1)</li>
<li>arr.map()</li>
<li>function test(){}</li>
</ul>
<h3 id="语句代码">语句(代码)</h3>
<ul>
<li>if(){}</li>
<li>for(){}</li>
<li>switch(){case:xxxx}</li>
</ul>
<h1 id="react面向组件编程">React面向组件编程</h1>
<h2 id="模块与组件">模块与组件</h2>
<h3 id="模块">模块</h3>
<ol>
<li>
<p>理解：向外提供特定功能的js程序, 一般就是一个js文件</p>
</li>
<li>
<p>为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。</p>
</li>
<li>
<p>作用：复用js, 简化js的编写, 提高js运行效率</p>
</li>
</ol>
<h3 id="组件">组件</h3>
<ol>
<li>
<p>理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)</p>
</li>
<li>
<p>为什么要用组件： 一个界面的功能更复杂</p>
</li>
<li>
<p>作用：复用编码, 简化项目编码, 提高运行效率</p>
</li>
</ol>
<h2 id="模块化与组件化">模块化与组件化</h2>
<h3 id="模块化">模块化</h3>
<p>当应用的js都以模块来编写，这个应用就是一个模块化的应用</p>
<h3 id="组件化">组件化</h3>
<p>当应用是以多组件的方式实现，这个应用就是一个组件化的应用</p>
<h2 id="react中定义组件">React中定义组件</h2>
<h3 id="函数式组件">函数式组件</h3>
<ol>
<li>声名函数，函数名首字母大写</li>
<li>返回JSX</li>
<li>render中渲染组件<Demo/></li>
</ol>
<p>==注意==：函数组件中的this为undefined，因为babel编译后开启了严格模式</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="c1">//1.声名函数式组件
</span><span class="c1"></span>  <span class="kd">function</span> <span class="nx">Demo</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span> <span class="c1">//undefined(babel编译后开启了严格模式)
</span><span class="c1"></span>    <span class="k">return</span> <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">h2</span><span class="o">&gt;</span><span class="nx">我是用函数定义的组件</span><span class="err">（</span><span class="nx">适用于简单组件的定义</span><span class="err">）</span><span class="o">&lt;</span><span class="err">/h2&gt;</span>
      <span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;</span><span class="mi">2</span><span class="o">&lt;</span><span class="err">/span&gt;</span>
    <span class="o">&lt;</span><span class="err">/div&gt;</span>
  <span class="p">}</span>

  <span class="c1">//2.渲染组件
</span><span class="c1"></span>  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Demo</span><span class="o">/&gt;</span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
  <span class="c1">// 执行了ReactDOM.render()
</span><span class="c1"></span>  <span class="c1">//   1.React解析组件标签，找到了MyComponent组件
</span><span class="c1"></span>  <span class="c1">//   2.发现组件是使用函数定义的，随后调用了函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中
</span><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="类式组件">类式组件</h3>
<ol>
<li>继承自React.Component</li>
<li>render中的this执向组件实例对象,不再是babel解析后的undefined</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="c1">//创建类式组件
</span><span class="c1"></span>  <span class="kr">class</span> <span class="nx">MyComponent</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
    <span class="nx">render</span><span class="p">(){</span>
      <span class="c1">//render中的this？--MyComponent的实例对象
</span><span class="c1"></span>      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
      <span class="c1">//render是放在哪里的？--MyComponent的原型对象上，供实例使用
</span><span class="c1"></span>      <span class="k">return</span> <span class="o">&lt;</span><span class="nx">h2</span><span class="o">&gt;</span><span class="nx">我是用类定义的组件</span><span class="err">（</span><span class="nx">适用于复杂组件的定义</span><span class="err">）</span><span class="o">&lt;</span><span class="err">/h2&gt;</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyComponent</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
  <span class="cm">/*
</span><span class="cm">  * 执行了ReactDOM.render(&lt;MyComponent/&gt;)之后，发生了什么
</span><span class="cm">  * 1.React解析组件标签，找到Component组件
</span><span class="cm">  * 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
</span><span class="cm">  * 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中
</span><span class="cm">  * */</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="组件实例的三大属性">组件实例的三大属性</h2>
<h3 id="state">state</h3>
<ol>
<li>state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)</li>
<li>组件被称为&quot;状态机&quot;, 通过更新组件的state来更新对应的页面显示(重新渲染组件)</li>
<li>在state被修改时会调用render</li>
</ol>
<p>==注意==：</p>
<ol>
<li>
<p>组件中render方法中的this为组件实例对象</p>
</li>
<li>
<p>组件自定义的方法中this为undefined，如何解决？</p>
<ul>
<li>
<p>强制绑定this: 通过函数对象的bind()</p>
</li>
<li>
<p>赋值语句+箭头函数（开发常用）</p>
</li>
</ul>
</li>
<li>
<p>状态数据，不能直接修改或更新</p>
</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Weather</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
    <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
      <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span>
      <span class="c1">// 初始化状态
</span><span class="c1"></span>      <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="o">=</span><span class="p">{</span><span class="nx">isHot</span><span class="o">:</span><span class="kc">false</span><span class="p">}</span>
    <span class="p">}</span>
    <span class="nx">render</span><span class="p">(){</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
      <span class="kr">const</span> <span class="p">{</span><span class="nx">isHot</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
      <span class="c1">// 使用
</span><span class="c1"></span>      <span class="k">return</span> <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">今天天气很</span><span class="p">{</span><span class="nx">isHot</span><span class="o">?</span><span class="s1">&#39;炎热&#39;</span><span class="o">:</span><span class="s1">&#39;凉爽&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Weather</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="获取state中的值">获取state中的值</h4>
<h5 id="类中方法中的this">类中方法中的this</h5>
<ol>
<li>类中定义的方法会自动开启==局部严格模式==</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Student</span><span class="p">{</span>
    <span class="nx">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span><span class="nx">age</span><span class="p">)</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">age</span> <span class="o">=</span> <span class="nx">age</span>
    <span class="p">}</span>
    <span class="nx">say</span><span class="p">(){</span>
      <span class="c1">// 默认use strict
</span><span class="c1"></span>      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
    <span class="p">}</span>
  <span class="p">}</span>

  <span class="kd">let</span> <span class="nx">s1</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Student</span><span class="p">(</span><span class="s1">&#39;xqz&#39;</span><span class="p">,</span><span class="mi">12</span><span class="p">)</span>
  <span class="nx">s1</span><span class="p">.</span><span class="nx">say</span><span class="p">()</span> <span class="c1">//this指向Student实例
</span><span class="c1"></span>  <span class="kd">let</span> <span class="nx">say</span> <span class="o">=</span> <span class="nx">s1</span><span class="p">.</span><span class="nx">say</span>
  <span class="nx">say</span><span class="p">()</span> <span class="c1">//this为undefined
</span><span class="c1"></span><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h5 id="react组件类中的this">React组件类中的this</h5>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Weather</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
    <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
      <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="o">=</span><span class="p">{</span><span class="nx">isHot</span><span class="o">:</span><span class="kc">false</span><span class="p">}</span>
    <span class="p">}</span>
    <span class="nx">render</span><span class="p">(){</span>
      <span class="kr">const</span> <span class="p">{</span><span class="nx">isHot</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
      <span class="k">return</span> <span class="o">&lt;</span><span class="nx">h1</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">今天天气很</span><span class="p">{</span><span class="nx">isHot</span><span class="o">?</span><span class="s1">&#39;炎热&#39;</span><span class="o">:</span><span class="s1">&#39;凉爽&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
    <span class="p">}</span>

    <span class="nx">changeWeather</span><span class="p">()</span> <span class="p">{</span>
      <span class="c1">// 只要通过weather的实例对象去调用了changeWeather，那么this就是实例对象
</span><span class="c1"></span>      <span class="c1">// 由于changeWeather是作为onClick的回调， 不是通过实例调用的，是直接调用
</span><span class="c1"></span>      <span class="c1">// 类中的方法开启了局部的严格模式，所以this为undefined
</span><span class="c1"></span>      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">)</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Weather</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>

<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h5 id="如何解决">如何解决</h5>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Weather</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
    <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
      <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="o">=</span><span class="p">{</span><span class="nx">isHot</span><span class="o">:</span><span class="kc">false</span><span class="p">}</span>
        <span class="c1">// this.changeWeather是原型上的方法，通过bind，将this指向实例
</span><span class="c1"></span>        <span class="c1">// demo为实例上的方法，就是把原型上的changeWeather方法复刻一份，修改this后添加到实例身上,相当于重写
</span><span class="c1"></span>      	<span class="c1">// 在render方法中调用的是实例身上的方法
</span><span class="c1"></span>      <span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
    <span class="p">}</span>
    <span class="nx">render</span><span class="p">(){</span>
      <span class="kr">const</span> <span class="p">{</span><span class="nx">isHot</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
      <span class="k">return</span> <span class="o">&lt;</span><span class="nx">h1</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">今天天气很</span><span class="p">{</span><span class="nx">isHot</span><span class="o">?</span><span class="s1">&#39;炎热&#39;</span><span class="o">:</span><span class="s1">&#39;凉爽&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
    <span class="p">}</span>

    <span class="nx">changeWeather</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">)</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Weather</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>

<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="修改state中的值">修改state中的值</h4>
<p>React.Component.prototype中有setState方法，通过组件实例.proto-&gt;组件类.prototype-&gt;React.Component父类的prototype中寻找到</p>
<ol>
<li>constructor调用一次</li>
<li>render调用多次</li>
<li>changeWeather点几次调用几次</li>
</ol>
<p>==注意==：</p>
<ol>
<li>this必须在调用了super之后才有</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Weather</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
    <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
      <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="o">=</span><span class="p">{</span><span class="nx">isHot</span><span class="o">:</span><span class="kc">false</span><span class="p">}</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
    <span class="p">}</span>
    <span class="nx">render</span><span class="p">(){</span>
      <span class="kr">const</span> <span class="p">{</span><span class="nx">isHot</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
      <span class="k">return</span> <span class="o">&lt;</span><span class="nx">h1</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">今天天气很</span><span class="p">{</span><span class="nx">isHot</span><span class="o">?</span><span class="s1">&#39;炎热&#39;</span><span class="o">:</span><span class="s1">&#39;凉爽&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
    <span class="p">}</span>

    <span class="nx">changeWeather</span><span class="p">()</span> <span class="p">{</span>
      <span class="kr">const</span> <span class="p">{</span><span class="nx">isHot</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
      <span class="c1">//注意：状态不可直接更改，要借助内置API
</span><span class="c1"></span>      <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">isHot</span><span class="o">:!</span><span class="nx">isHot</span><span class="p">})</span>
      <span class="p">}</span>
  <span class="p">}</span>
  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Weather</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="state的简写形式">state的简写形式</h4>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Weather</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
    <span class="c1">// 此时state在每一个实例自身
</span><span class="c1"></span>    <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">isHot</span><span class="o">:</span> <span class="kc">false</span><span class="p">}</span>

    <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
      <span class="kr">const</span> <span class="p">{</span><span class="nx">isHot</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
      <span class="k">return</span> <span class="o">&lt;</span><span class="nx">h1</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">今天天气很</span><span class="p">{</span><span class="nx">isHot</span> <span class="o">?</span> <span class="s1">&#39;炎热&#39;</span> <span class="o">:</span> <span class="s1">&#39;凉爽&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
    <span class="p">}</span>

    <span class="c1">// 此时方法和state一样，用赋值语句，成了实例自身的一个属性，用箭头函数，this指向Weather实例，否则普通函数this为undefined。如果不用赋值语句，那么函数是在原型上的
</span><span class="c1"></span>    <span class="nx">changeWeather</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span>
      <span class="kr">const</span> <span class="p">{</span><span class="nx">isHot</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">isHot</span><span class="o">:</span> <span class="o">!</span><span class="nx">isHot</span><span class="p">})</span>
    <span class="p">}</span>
  <span class="p">}</span>

  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Weather</span><span class="o">/&gt;</span><span class="p">,</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>

<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="props">props</h3>
<h4 id="props的基本使用">props的基本使用</h4>
<p>组件实例上有props属性</p>
<p>==注意==：</p>
<ol>
<li>props是只读的，修改会报错</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Person</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
    <span class="nx">render</span><span class="p">(){</span>
        <span class="c1">//获取值
</span><span class="c1"></span>      <span class="kr">const</span> <span class="p">{</span><span class="nx">name</span><span class="p">,</span><span class="nx">age</span><span class="p">,</span><span class="nx">sex</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span>
      <span class="k">return</span> <span class="p">(</span>
        <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
          <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="nx">姓名</span><span class="o">:</span><span class="p">{</span><span class="nx">name</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
          <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="nx">性别</span><span class="o">:</span><span class="p">{</span><span class="nx">age</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
          <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="nx">年龄</span><span class="o">:</span><span class="p">{</span><span class="nx">sex</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
        <span class="o">&lt;</span><span class="err">/ul&gt;</span>
      <span class="p">)</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="c1">//传值
</span><span class="c1"></span>  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Person</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&#34;xqz&#34;</span> <span class="nx">age</span><span class="o">=</span><span class="s2">&#34;20&#34;</span> <span class="nx">sex</span><span class="o">=</span><span class="s2">&#34;man&#34;</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="props批量传递">props批量传递</h4>
<p>使用扩展运算符传递</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Person</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
    <span class="nx">render</span><span class="p">(){</span>
      <span class="kr">const</span> <span class="p">{</span><span class="nx">name</span><span class="p">,</span><span class="nx">age</span><span class="p">,</span><span class="nx">sex</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span>
      <span class="k">return</span> <span class="p">(</span>
        <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
          <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="nx">姓名</span><span class="o">:</span><span class="p">{</span><span class="nx">name</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
          <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="nx">性别</span><span class="o">:</span><span class="p">{</span><span class="nx">age</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
          <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="nx">年龄</span><span class="o">:</span><span class="p">{</span><span class="nx">sex</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
        <span class="o">&lt;</span><span class="err">/ul&gt;</span>
      <span class="p">)</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="kr">const</span> <span class="nx">p</span> <span class="o">=</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span><span class="s1">&#39;老刘&#39;</span><span class="p">,</span><span class="nx">age</span><span class="o">:</span><span class="mi">18</span><span class="p">,</span><span class="nx">sex</span><span class="o">:</span><span class="s1">&#39;女&#39;</span><span class="p">}</span>
  <span class="c1">//这里的...p并不是复制对象，原生中不能用展开运算符操作对象，但是这里有react.development.js和babel所以可以，但是不能随意使用，仅仅适用于标签属性的传递，这里的{}只是代表里面要写js表达式
</span><span class="c1"></span>  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Person</span> <span class="p">{...</span><span class="nx">p</span><span class="p">}</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="对props进行限制">对props进行限制</h4>
<ol>
<li>
<p>组件类的proTypes属性（react模块里的要求）：对标签属性进行类型，必要性的限制</p>
</li>
<li>
<p>PropTypes是因为引入了prop-types.js模块</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">// 对标签属性进行类型，必要性的限制
</span><span class="c1"></span><span class="nx">Person</span><span class="p">.</span><span class="nx">propTypes</span><span class="o">=</span><span class="p">{</span>
  <span class="nx">name</span><span class="o">:</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">.</span><span class="nx">isRequired</span><span class="p">,</span> <span class="c1">//限制name必传，且为字符串
</span><span class="c1"></span>  <span class="nx">sex</span><span class="o">:</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">,</span>
  <span class="nx">age</span><span class="o">:</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span><span class="p">,</span>
  <span class="nx">speak</span><span class="o">:</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">func</span> <span class="c1">//限制speak为function
</span><span class="c1"></span><span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>组件类的defaultProps属性：指定默认标签属性</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">// 指定默认标签属性
</span><span class="c1"></span><span class="nx">Person</span><span class="p">.</span><span class="nx">defaultProps</span><span class="o">=</span><span class="p">{</span>
  <span class="nx">sex</span><span class="o">:</span><span class="s1">&#39;不男不女&#39;</span><span class="p">,</span>
  <span class="nx">age</span><span class="o">:</span><span class="mi">18</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>使用组件时传递</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">p</span> <span class="o">=</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span><span class="s1">&#39;老刘&#39;</span><span class="p">,</span><span class="nx">age</span><span class="o">:</span><span class="mi">18</span><span class="p">}</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Person</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&#34;xqz&#34;</span> <span class="nx">age</span><span class="o">=</span><span class="p">{</span><span class="mi">19</span><span class="p">}</span> <span class="nx">sex</span><span class="o">=</span><span class="s2">&#34;man&#34;</span> <span class="nx">speak</span><span class="o">=</span><span class="p">{</span><span class="nx">speak</span><span class="p">}</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test2&#39;</span><span class="p">))</span>
<span class="kd">function</span> <span class="nx">speak</span><span class="p">()</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h4 id="props简写">props简写</h4>
<p>将propTypes和defaultProps设置为组件类的静态属性</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kr">class</span> <span class="nx">Person</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
  <span class="c1">// 对标签属性进行类型，必要性的限制
</span><span class="c1"></span>  <span class="kr">static</span> <span class="nx">propTypes</span><span class="o">=</span><span class="p">{</span>
    <span class="nx">name</span><span class="o">:</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">.</span><span class="nx">isRequired</span><span class="p">,</span> 
    <span class="nx">sex</span><span class="o">:</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">,</span>
    <span class="nx">age</span><span class="o">:</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span><span class="p">,</span>
    <span class="nx">speak</span><span class="o">:</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">func</span> 
  <span class="p">}</span>
  <span class="c1">// 指定默认标签属性
</span><span class="c1"></span>  <span class="kr">static</span> <span class="nx">defaultProps</span><span class="o">=</span><span class="p">{</span>
    <span class="nx">sex</span><span class="o">:</span><span class="s1">&#39;不男不女&#39;</span><span class="p">,</span>
    <span class="nx">age</span><span class="o">:</span><span class="mi">18</span>
  <span class="p">}</span>
  <span class="nx">render</span><span class="p">(){</span>
    <span class="kr">const</span> <span class="p">{</span><span class="nx">name</span><span class="p">,</span><span class="nx">age</span><span class="p">,</span><span class="nx">sex</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span>
    <span class="c1">// this.props.name = &#39;xqz&#39; //报错，因为props是只读的
</span><span class="c1"></span>    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="nx">姓名</span><span class="o">:</span><span class="p">{</span><span class="nx">name</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
        <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="nx">性别</span><span class="o">:</span><span class="p">{</span><span class="nx">age</span><span class="o">+</span><span class="mi">1</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
        <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="nx">年龄</span><span class="o">:</span><span class="p">{</span><span class="nx">sex</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
      <span class="o">&lt;</span><span class="err">/ul&gt;</span>
    <span class="p">)</span>
  <span class="p">}</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="函数式组件使用props">函数式组件使用props</h4>
<ol>
<li>组件传递方式不变，通过参数接收</li>
<li>对props的限制和默认值只能写在函数外面</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">Person</span><span class="p">(</span><span class="nx">props</span><span class="p">){</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span>
  <span class="kr">const</span> <span class="p">{</span><span class="nx">name</span><span class="p">,</span><span class="nx">age</span><span class="p">,</span><span class="nx">sex</span><span class="p">}</span> <span class="o">=</span> <span class="nx">props</span>
  <span class="k">return</span> <span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="nx">姓名</span><span class="o">:</span><span class="p">{</span><span class="nx">name</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
      <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="nx">性别</span><span class="o">:</span><span class="p">{</span><span class="nx">age</span><span class="o">+</span><span class="mi">1</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
      <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span><span class="nx">年龄</span><span class="o">:</span><span class="p">{</span><span class="nx">sex</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
    <span class="o">&lt;</span><span class="err">/ul&gt;</span>
  <span class="p">)</span>
<span class="p">}</span>
  <span class="c1">// 对标签属性进行类型，必要性的限制
</span><span class="c1"></span>  <span class="nx">Person</span><span class="p">.</span><span class="nx">propTypes</span><span class="o">=</span><span class="p">{</span>
    <span class="nx">name</span><span class="o">:</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">.</span><span class="nx">isRequired</span><span class="p">,</span>
    <span class="nx">sex</span><span class="o">:</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">string</span><span class="p">,</span>
    <span class="nx">age</span><span class="o">:</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">number</span>
  <span class="p">}</span>
  <span class="c1">// 指定默认标签属性
</span><span class="c1"></span>  <span class="nx">Person</span><span class="p">.</span><span class="nx">defaultProps</span><span class="o">=</span><span class="p">{</span>
    <span class="nx">sex</span><span class="o">:</span><span class="s1">&#39;不男不女&#39;</span><span class="p">,</span>
    <span class="nx">age</span><span class="o">:</span><span class="mi">18</span>
  <span class="p">}</span>
<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Person</span> <span class="nx">name</span><span class="o">=</span><span class="s2">&#34;xqz&#34;</span> <span class="nx">age</span><span class="o">=</span><span class="p">{</span><span class="mi">19</span><span class="p">}</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test2&#39;</span><span class="p">))</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="refs与事件处理">refs与事件处理</h3>
<h4 id="string类型的ref已过时">string类型的ref（已过时）</h4>
<ol>
<li>直接在标签上定义ref，通过this.refs使用</li>
<li>会有效率问题，已经过时</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Demo</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
    <span class="nx">showData</span><span class="o">=</span><span class="p">()=&gt;{</span>
      <span class="kr">const</span> <span class="p">{</span><span class="nx">input1</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">input1</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span>
    <span class="p">}</span>
    <span class="nx">showData2</span><span class="o">=</span><span class="p">()=&gt;{</span>
      <span class="kr">const</span> <span class="p">{</span><span class="nx">input2</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">refs</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">input2</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span>
    <span class="p">}</span>
    <span class="nx">render</span><span class="p">(){</span>
      <span class="k">return</span> <span class="p">(</span>
        <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
          <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">&#34;input1&#34;</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData</span><span class="p">}</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">&#34;点击提示&#34;</span><span class="o">/&gt;</span>
          <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">点击</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
          <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">ref</span><span class="o">=</span><span class="s2">&#34;input2&#34;</span> <span class="nx">onBlur</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData2</span><span class="p">}</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s2">&#34;失去焦点提示&#34;</span><span class="o">/&gt;</span>
        <span class="o">&lt;</span><span class="err">/div&gt;</span>
      <span class="p">)</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Demo</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="回调函数形式的refs">回调函数形式的refs</h4>
<h5 id="内联的写法开发常用">内联的写法（开发常用）</h5>
<p>在更新时，ref的回调会调用两次，但是其实并没有什么影响</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Demo</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="nx">showData</span><span class="o">=</span><span class="p">()=&gt;{</span>
                <span class="kr">const</span> <span class="p">{</span><span class="nx">input1</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">input1</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">showData2</span><span class="o">=</span><span class="p">()=&gt;{</span>
                <span class="kr">const</span> <span class="p">{</span><span class="nx">input2</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">input2</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
                <span class="k">return</span><span class="p">(</span>
                    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
                    <span class="c1">// 这里的回调函数会传一个参数，参数为dom节点，this执向实例，在实例中添加属性input1，值为它的dom节点
</span><span class="c1"></span>                        <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="nx">c</span> <span class="p">=&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">input1</span> <span class="o">=</span> <span class="nx">c</span><span class="p">}</span>  <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span><span class="o">/&gt;</span>
                        <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">点击</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
                        <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="nx">c</span> <span class="p">=&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">input2</span> <span class="o">=</span> <span class="nx">c</span><span class="p">}</span> <span class="nx">onBlur</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData2</span><span class="p">}</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span><span class="o">/&gt;</span>
                    <span class="o">&lt;</span><span class="err">/div&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Demo</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h5 id="class绑定的函数形式">class绑定的函数形式</h5>
<p>在更新时，ref的函数不会回调</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Demo</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>

            <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span><span class="nx">isHot</span><span class="o">:</span><span class="kc">true</span><span class="p">}</span>
            <span class="nx">showData</span><span class="o">=</span><span class="p">()=&gt;{</span>
                <span class="kr">const</span> <span class="p">{</span><span class="nx">input</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">changeWeather</span><span class="o">=</span><span class="p">()=&gt;{</span>
                <span class="kr">const</span> <span class="p">{</span><span class="nx">isHot</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">isHot</span><span class="o">:!</span><span class="nx">isHot</span><span class="p">})</span>
            <span class="p">}</span>
            <span class="c1">//回调的函数
</span><span class="c1"></span>            <span class="nx">saveInput</span><span class="o">=</span><span class="p">(</span><span class="nx">c</span><span class="p">)=&gt;{</span>
                  <span class="c1">//这里其实用onChange事件然后e.target也可以获取，然后存入state中，就是受控组件了
</span><span class="c1"></span>                <span class="k">this</span><span class="p">.</span><span class="nx">input</span> <span class="o">=</span> <span class="nx">c</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;@&#39;</span><span class="p">,</span><span class="nx">c</span><span class="p">)</span>
            <span class="p">}</span>
            <span class="nx">render</span><span class="p">(){</span>
                <span class="kr">const</span> <span class="p">{</span><span class="nx">isHot</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
                <span class="k">return</span> <span class="p">(</span>
                    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
                        <span class="o">&lt;</span><span class="nx">h2</span><span class="o">&gt;</span><span class="nx">今天天气</span><span class="p">{</span><span class="nx">isHot</span><span class="o">?</span><span class="s1">&#39;炎热&#39;</span><span class="o">:</span><span class="s1">&#39;凉爽&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h2&gt;</span>
                        <span class="c1">// 这里更新时不会回调两次
</span><span class="c1"></span>                        <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span> <span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">saveInput</span> <span class="p">}</span><span class="o">/&gt;</span>
                        <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">showData</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">显示</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
                        <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">changeWeather</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">改变天气</span><span class="o">&lt;</span><span class="err">/button&gt;    </span>
                    <span class="o">&lt;</span><span class="err">/div&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Demo</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="createref的使用">createRef的使用</h4>
<ol>
<li>React.createRef()创建容器，每个容器只能存放一个节点</li>
<li>通过this.容器名.current获得dom节点</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Demo</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="nx">myRef</span><span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createRef</span><span class="p">()</span>
            <span class="nx">show</span><span class="o">=</span><span class="p">()=&gt;{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">myRef</span><span class="p">.</span><span class="nx">current</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">render</span><span class="p">(){</span>
                <span class="k">return</span><span class="p">(</span>
                    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
                        <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">myRef</span><span class="p">}</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span><span class="o">/&gt;</span>
                        <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">show</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">按钮</span><span class="o">&lt;</span><span class="err">/button&gt;    </span>
                    <span class="o">&lt;</span><span class="err">/div&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Demo</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><p>==注意==：</p>
<ol>
<li>不能滥用ref，如果需要获取的dom节点上绑定了事件处理函数，那么可以从函数中获取event.target</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Demo</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="nx">show</span><span class="o">=</span><span class="p">(</span><span class="nx">event</span><span class="p">)=&gt;{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">render</span><span class="p">(){</span>
                <span class="k">return</span> <span class="p">(</span>
                    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
                        <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span> <span class="nx">onBlur</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">show</span><span class="p">}</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s1">&#39;失去焦点提示&#39;</span><span class="o">/&gt;</span>    
                    <span class="o">&lt;</span><span class="err">/div&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>
        
        <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Demo</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">)</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="组件通信">组件通信</h2>
<p>==注意==：状态在哪里，操作状态的方法就在哪里</p>
<h3 id="父传子">父传子</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E4%BC%A0%E5%AD%90.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E4%BC%A0%E5%AD%90.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E4%BC%A0%E5%AD%90.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E4%BC%A0%E5%AD%90.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E4%BC%A0%E5%AD%90.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E4%BC%A0%E5%AD%90.png" /></p>
<h3 id="子传父">子传父</h3>
<ol>
<li>
<p>父组件向子组件传递一个函数</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AD%90%E4%BC%A0%E7%88%B6.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AD%90%E4%BC%A0%E7%88%B6.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AD%90%E4%BC%A0%E7%88%B6.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AD%90%E4%BC%A0%E7%88%B6.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AD%90%E4%BC%A0%E7%88%B6.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AD%90%E4%BC%A0%E7%88%B6.png" /></p>
</li>
<li>
<p>子组件调用该函数并传参，父组件将该函数的参数保存到state中</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AD%90%E4%BC%A0%E7%88%B6%EF%BC%88%E5%AD%90%EF%BC%89.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AD%90%E4%BC%A0%E7%88%B6%EF%BC%88%E5%AD%90%EF%BC%89.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AD%90%E4%BC%A0%E7%88%B6%EF%BC%88%E5%AD%90%EF%BC%89.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AD%90%E4%BC%A0%E7%88%B6%EF%BC%88%E5%AD%90%EF%BC%89.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AD%90%E4%BC%A0%E7%88%B6%EF%BC%88%E5%AD%90%EF%BC%89.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%AD%90%E4%BC%A0%E7%88%B6%EF%BC%88%E5%AD%90%EF%BC%89.png" /></p>
</li>
</ol>
<h3 id="爷孙传值">爷孙传值</h3>
<ol>
<li>爷爷组件向父组件传递函数</li>
<li>父组件将函数继续传递给子组件</li>
<li>子组件调用函数，传参，爷爷组件通过参数接收值</li>
</ol>
<h3 id="兄弟传值">兄弟传值</h3>
<h4 id="消息订阅-发布机制">消息订阅-发布机制</h4>
<ol>
<li>
<p>工具库: PubSubJS</p>
</li>
<li>
<p>下载: npm install pubsub-js &ndash;save</p>
</li>
<li>
<p>使用:</p>
<ol>
<li>
<p>import PubSub from &lsquo;pubsub-js&rsquo; //引入</p>
</li>
<li>
<p>PubSub.subscribe(&lsquo;delete&rsquo;, function(data){ }); //订阅</p>
</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript">    <span class="nx">componentDidMount</span><span class="p">()</span> <span class="p">{</span>
        <span class="c1">//订阅消息
</span><span class="c1"></span>        <span class="nx">PubSub</span><span class="p">.</span><span class="nx">subscribe</span><span class="p">(</span><span class="s1">&#39;changeState&#39;</span><span class="p">,</span> <span class="p">(</span><span class="nx">_</span><span class="p">,</span> <span class="nx">stateObj</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">(</span><span class="nx">stateObj</span><span class="p">)</span>
        <span class="p">})</span>
    <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div><ol start="3">
<li>PubSub.publish(&lsquo;delete&rsquo;, data) //发布消息</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="nx">search</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="kr">const</span> <span class="p">{</span> <span class="nx">input1</span><span class="o">:</span> <span class="p">{</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">keyword</span> <span class="p">}</span> <span class="p">}</span> <span class="o">=</span> <span class="k">this</span>
        <span class="c1">//发布消息
</span><span class="c1"></span>        <span class="nx">PubSub</span><span class="p">.</span><span class="nx">publish</span><span class="p">(</span><span class="s1">&#39;changeState&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">isFirst</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">isLoading</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span>
        <span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="sb">`https://api.github.com/search/users?q=</span><span class="si">${</span><span class="nx">keyword</span><span class="si">}</span><span class="sb">`</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="nx">res</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="nx">PubSub</span><span class="p">.</span><span class="nx">publish</span><span class="p">(</span><span class="s1">&#39;changeState&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">isLoading</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span><span class="nx">users</span><span class="o">:</span><span class="nx">res</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">items</span> <span class="p">})</span>
        <span class="p">}).</span><span class="k">catch</span><span class="p">(</span><span class="nx">err</span> <span class="p">=&gt;</span> <span class="p">{</span>
            <span class="nx">PubSub</span><span class="p">.</span><span class="nx">publish</span><span class="p">(</span><span class="s1">&#39;changeState&#39;</span><span class="p">,</span> <span class="p">{</span> <span class="nx">err</span> <span class="p">})</span>
        <span class="p">})</span>
    <span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h2 id="react中的构造器">React中的构造器</h2>
<ol>
<li>第一个用处，通过this.state赋值对象来初始化内部state，但是一般直接在类中使用赋值语句</li>
<li>第二个用处，为事件绑定实例的this，但是一般用赋值语句+箭头函数解决</li>
<li>第三个用处，需要在constructor中获取props。所以，constructor基本不用，如果用了必须写super(props)，且必须传props，不传就不能在构造器中使用this.props获取值</li>
</ol>
<h2 id="react中的事件绑定">React中的事件绑定</h2>
<ol>
<li>驼峰命名</li>
<li>{}中写函数名，不需要调用</li>
<li>可以将事件函数写在组件类中，通过赋值语句+箭头函数，箭头函数中的this指向实例，可以获取state中的值</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
  <span class="kr">class</span> <span class="nx">Weather</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
    <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
      <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="o">=</span><span class="p">{</span><span class="nx">isHot</span><span class="o">:</span><span class="kc">false</span><span class="p">}</span>
    <span class="p">}</span>
      <span class="c1">// 事件函数
</span><span class="c1"></span>    <span class="nx">demo2</span><span class="o">=</span><span class="p">()=&gt;{</span>
        <span class="nx">log</span>
    <span class="p">}</span>
    <span class="nx">render</span><span class="p">(){</span>
      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">)</span>
      <span class="kr">const</span> <span class="p">{</span><span class="nx">isHot</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
      
      <span class="k">return</span> 
        <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
            <span class="c1">// 绑定事件
</span><span class="c1"></span>        <span class="o">&lt;</span><span class="nx">h1</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">demo</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">今天天气很</span><span class="p">{</span><span class="nx">isHot</span><span class="o">?</span><span class="s1">&#39;炎热&#39;</span><span class="o">:</span><span class="s1">&#39;凉爽&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
        	<span class="c1">// 绑定事件
</span><span class="c1"></span>        <span class="o">&lt;</span><span class="nx">h1</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">demo2</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">今天天气很</span><span class="p">{</span><span class="nx">isHot</span><span class="o">?</span><span class="s1">&#39;炎热&#39;</span><span class="o">:</span><span class="s1">&#39;凉爽&#39;</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
        <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="p">}</span>
  <span class="p">}</span>
  <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Weather</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
  <span class="c1">// 事件函数
</span><span class="c1"></span>  <span class="kd">function</span> <span class="nx">demo</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;标题被点击了&#39;</span><span class="p">)</span>
  <span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="react中的事件处理">React中的事件处理</h2>
<ol>
<li>
<p>可以通过参数拿到当前的dom节点</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Demo</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="nx">show</span><span class="o">=</span><span class="p">(</span><span class="nx">event</span><span class="p">)=&gt;{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">render</span><span class="p">(){</span>
                <span class="k">return</span> <span class="p">(</span>
                    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
                        <span class="o">&lt;</span><span class="nx">input</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span> <span class="nx">onBlur</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">show</span><span class="p">}</span> <span class="nx">placeholder</span><span class="o">=</span><span class="s1">&#39;失去焦点提示&#39;</span><span class="o">/&gt;</span>    
                    <span class="o">&lt;</span><span class="err">/div&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Demo</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h2 id="非受控组件">非受控组件</h2>
<ol>
<li>表单中所有输入类的值是现用现取</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Login</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="nx">handleSubmit</span><span class="o">=</span><span class="p">(</span><span class="nx">e</span><span class="p">)=&gt;{</span>
                <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span>
                <span class="kr">const</span> <span class="p">{</span><span class="nx">username</span><span class="p">,</span><span class="nx">password</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">username</span><span class="p">.</span><span class="nx">value</span><span class="p">,</span><span class="nx">password</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
                <span class="k">return</span> <span class="p">(</span>
                    <span class="c1">// 在点击提交时才获取到表单中的值
</span><span class="c1"></span>                    <span class="o">&lt;</span><span class="nx">form</span> <span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">&gt;</span>
                        <span class="nx">用户名</span><span class="err">：</span><span class="o">&lt;</span><span class="nx">input</span> <span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="nx">c</span><span class="p">=&gt;</span><span class="k">this</span><span class="p">.</span><span class="nx">username</span><span class="o">=</span><span class="nx">c</span><span class="p">}</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span><span class="o">/&gt;</span>
                        <span class="nx">密码</span><span class="err">：</span><span class="o">&lt;</span><span class="nx">input</span> <span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="nx">c</span><span class="p">=&gt;</span><span class="k">this</span><span class="p">.</span><span class="nx">password</span><span class="o">=</span><span class="nx">c</span><span class="p">}</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span><span class="o">/&gt;</span>
                        <span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="nx">提交</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
                    <span class="o">&lt;</span><span class="err">/form&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Login</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="受控组件推荐">受控组件（推荐）</h2>
<ol>
<li>输入类的表单，在输入时就将值存入state中，等哪里需要使用时直接从state中去获取，相当于vue的双向数据绑定</li>
<li>可以避免ref的滥用</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Login</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="nx">state</span><span class="o">=</span><span class="p">{</span>
                <span class="nx">username</span><span class="o">:</span><span class="s1">&#39;&#39;</span><span class="p">,</span>
                <span class="nx">password</span><span class="o">:</span><span class="s1">&#39;&#39;</span>
            <span class="p">}</span>
        <span class="c1">// 将获取的数据保存到state中
</span><span class="c1"></span>            <span class="nx">savePassword</span><span class="o">=</span><span class="p">(</span><span class="nx">e</span><span class="p">)=&gt;{</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">username</span><span class="o">:</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">})</span>
            <span class="p">}</span>
            <span class="nx">saveUsername</span><span class="o">=</span><span class="p">(</span><span class="nx">e</span><span class="p">)=&gt;{</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">password</span><span class="o">:</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">})</span>
            <span class="p">}</span>
            <span class="nx">submit</span><span class="o">=</span><span class="p">(</span><span class="nx">e</span><span class="p">)=&gt;{</span>
                <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span>
                <span class="c1">// 在需要使用时从state中去获取数据
</span><span class="c1"></span>                <span class="kr">const</span> <span class="p">{</span><span class="nx">username</span><span class="p">,</span><span class="nx">password</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`用户名</span><span class="si">${</span><span class="nx">username</span><span class="si">}</span><span class="sb">,密码</span><span class="si">${</span><span class="nx">password</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">render</span><span class="p">(){</span>
                <span class="k">return</span> <span class="p">(</span>
                   <span class="o">&lt;</span><span class="nx">form</span> <span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">submit</span><span class="p">}</span><span class="o">&gt;</span>
                    <span class="c1">// 输入的数据通过当前的event.target获取
</span><span class="c1"></span>                        <span class="nx">用户名</span><span class="err">：</span><span class="o">&lt;</span><span class="nx">input</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">saveUsername</span><span class="p">}</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span><span class="o">/&gt;</span>
                        <span class="nx">密码</span><span class="err">：</span><span class="o">&lt;</span><span class="nx">input</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">savePassword</span><span class="p">}</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span><span class="o">/&gt;</span>
                        <span class="o">&lt;</span><span class="nx">button</span><span class="o">&gt;</span><span class="nx">登录</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
                    <span class="o">&lt;</span><span class="err">/form&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Login</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="柯里化">柯里化</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%9F%AF%E9%87%8C%E5%8C%96.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%9F%AF%E9%87%8C%E5%8C%96.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%9F%AF%E9%87%8C%E5%8C%96.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%9F%AF%E9%87%8C%E5%8C%96.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%9F%AF%E9%87%8C%E5%8C%96.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%9F%AF%E9%87%8C%E5%8C%96.png" /></p>
<h2 id="生命周期">生命周期</h2>
<p>引出生命周期</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Life</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="nx">state</span><span class="o">=</span><span class="p">{</span>
                <span class="nx">opacity</span><span class="o">:</span><span class="p">.</span><span class="mi">5</span>
            <span class="p">}</span>
            <span class="c1">// 卸载组件
</span><span class="c1"></span>            <span class="nx">death</span><span class="o">=</span><span class="p">()=&gt;{</span>
                    <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">unmountComponentAtNode</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
            <span class="p">}</span>
            <span class="c1">//挂载组件
</span><span class="c1"></span>            <span class="nx">componentDidMount</span><span class="p">(){</span>
                <span class="kd">let</span> <span class="p">{</span><span class="nx">opacity</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">timer</span><span class="o">=</span> <span class="nx">setInterval</span><span class="p">(()=&gt;{</span>
                    <span class="nx">opacity</span> <span class="o">-=</span> <span class="mf">0.1</span>
                    <span class="k">if</span><span class="p">(</span><span class="nx">opacity</span><span class="o">&lt;=</span><span class="mi">0</span><span class="p">){</span>
                        <span class="nx">opacity</span><span class="o">=</span><span class="mi">1</span>
                    <span class="p">}</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">opacity</span><span class="p">})</span>
                <span class="p">},</span><span class="mi">200</span><span class="p">)</span>
            <span class="p">}</span>
            <span class="c1">//卸载组件前
</span><span class="c1"></span>            <span class="nx">componentWillUnmount</span><span class="p">(){</span>
                <span class="nx">clearInterval</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">timer</span><span class="p">)</span>
            <span class="p">}</span>
        	<span class="c1">//初始化渲染，页面更新之后
</span><span class="c1"></span>            <span class="nx">render</span><span class="p">(){</span>
                
                <span class="kr">const</span> <span class="p">{</span><span class="nx">opacity</span><span class="p">}</span>  <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
                <span class="k">return</span> <span class="p">(</span>
                    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
                        <span class="o">&lt;</span><span class="nx">h1</span> <span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="nx">opacity</span><span class="p">}}</span><span class="o">&gt;</span><span class="nx">生命周期</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
                        <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">death</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">卸载组件</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
                    <span class="o">&lt;</span><span class="err">/div&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Life</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="生命周期旧">生命周期（旧）</h3>
<ol>
<li>初始化阶段：由ReactDOM.render()触发&mdash;-初次渲染
<ul>
<li>constructor()</li>
<li>componentWillMount()</li>
<li>render()</li>
<li>componentDIdMount()
<ul>
<li>一般做一些初始化的事，如：开启定时器，发送网络请求，订阅消息</li>
</ul>
</li>
</ul>
</li>
<li>更新阶段：由组件内部的this.setState()或父组件重新render()触发
<ul>
<li>shouldComponentUpdate()</li>
<li>componentWillUpdate()</li>
<li>render()</li>
<li>componentDidUpdate()</li>
</ul>
</li>
<li>卸载组件：由ReactDOM.unmountComponentAtNode()触发
<ul>
<li>componentWillUnmount()
<ul>
<li>一般做一些收尾的事，如：关闭定时器，取消订阅消息</li>
</ul>
</li>
</ul>
</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%28%E6%97%A7%29.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%28%E6%97%A7%29.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%28%E6%97%A7%29.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%28%E6%97%A7%29.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F(%E6%97%A7).png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F(%E6%97%A7).png" /></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span><span class="lnt">63
</span><span class="lnt">64
</span><span class="lnt">65
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Life</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="c1">//1 构造器
</span><span class="c1"></span>            <span class="nx">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">){</span>
                <span class="kr">super</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Life---constructor&#39;</span><span class="p">);</span>
                <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="o">=</span><span class="p">{</span>
                    <span class="nx">count</span><span class="o">:</span><span class="mi">0</span>
                <span class="p">}</span>
            <span class="p">}</span>
            <span class="c1">//2 挂载前
</span><span class="c1"></span>            <span class="nx">componentWillMount</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Life---componentWillMount&#39;</span><span class="p">);</span>
            <span class="p">}</span>

            <span class="nx">add</span><span class="o">=</span><span class="p">()=&gt;{</span>
                <span class="kr">const</span> <span class="p">{</span><span class="nx">count</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
                <span class="c1">// 这里会走5-6-7
</span><span class="c1"></span>                <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">count</span><span class="o">:</span><span class="nx">count</span><span class="o">+</span><span class="mi">1</span><span class="p">})</span>
            <span class="p">}</span>
            <span class="nx">update</span><span class="o">=</span><span class="p">()=&gt;{</span>
                <span class="c1">// 这里会走6-7
</span><span class="c1"></span>                <span class="k">this</span><span class="p">.</span><span class="nx">forceUpdate</span><span class="p">()</span>
            <span class="p">}</span>
            <span class="nx">death</span><span class="o">=</span><span class="p">()=&gt;{</span>
                <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">unmountComponentAtNode</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
            <span class="p">}</span>
            <span class="c1">//5 在setState后掉用，如果返回true则继续执行render，否则不更新页面，相当于一个阀门，用forceUpdate能直接绕过这个阀门
</span><span class="c1"></span>            <span class="nx">shouldComponentUpdate</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Life---shouldComponentUpdate&#39;</span><span class="p">);</span>
                <span class="k">return</span> <span class="kc">true</span>
            <span class="p">}</span>
            <span class="c1">//6 将要更新
</span><span class="c1"></span>            <span class="nx">componentWillUpdate</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Life---componentWillUpdate&#39;</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="c1">//3 初始化 7 更新
</span><span class="c1"></span>            <span class="nx">render</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Life---render&#39;</span><span class="p">);</span>
                <span class="kr">const</span> <span class="p">{</span><span class="nx">count</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
                <span class="k">return</span> <span class="p">(</span>
                    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
                        <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">数字</span><span class="err">：</span><span class="p">{</span><span class="nx">count</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
                        <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">add</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">加1</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
        			   <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">强制更新</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
                        <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">death</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">卸载</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
                    <span class="o">&lt;</span><span class="err">/div&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
            <span class="c1">//4 挂载完
</span><span class="c1"></span>            <span class="nx">componentDidMount</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Life---componentDidMount&#39;</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="c1">//8 更新完
</span><span class="c1"></span>            <span class="nx">componentDidUpdate</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Life---componentDidUpdate&#39;</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="c1">//9 卸载前
</span><span class="c1"></span>            <span class="nx">componentWillUnmount</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Life---componentWillUnmount&#39;</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Life</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="父组件的生命周期旧">父组件的生命周期(旧)</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Son</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="nx">state</span><span class="o">=</span><span class="p">{</span>
                    <span class="nx">carName</span><span class="o">:</span><span class="s1">&#39;奥迪&#39;</span>
                <span class="p">}</span>
                <span class="nx">changeCar</span><span class="o">=</span><span class="p">()=&gt;{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">carName</span><span class="o">:</span><span class="s1">&#39;宝马&#39;</span><span class="p">})</span>
                <span class="p">}</span>
            <span class="nx">render</span><span class="p">(){</span>
                <span class="kr">const</span> <span class="p">{</span><span class="nx">carName</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
                <span class="k">return</span><span class="p">(</span>
                    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
                        <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">Son</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
                        <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">changeCar</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">换车</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
        			<span class="c1">// 给父组件传属性
</span><span class="c1"></span>                        <span class="o">&lt;</span><span class="nx">Father</span> <span class="nx">carName</span><span class="o">=</span><span class="p">{</span><span class="nx">carName</span><span class="p">}</span><span class="o">/&gt;</span>
                    <span class="o">&lt;</span><span class="err">/div&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="kr">class</span> <span class="nx">Father</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="c1">//接收newProps时调用，第一次发送来的属性不会调用该钩子
</span><span class="c1"></span>            <span class="nx">componentWillReceiveProps</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;componentWillReceiveProps&#39;</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">shouldComponentUpdate</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;shouldComponentUpdate&#39;</span><span class="p">);</span>
                <span class="k">return</span> <span class="kc">true</span>
            <span class="p">}</span>
            <span class="nx">componentWillUpdate</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;componentWillUpdate&#39;</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">render</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;render&#39;</span><span class="p">);</span>
                <span class="k">return</span><span class="p">(</span>
                    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
                        <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">Father</span><span class="o">:</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">carName</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
                    <span class="o">&lt;</span><span class="err">/div&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
            <span class="nx">componentDidUpdate</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;componentDidUpdate&#39;</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Son</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="生命周期新">生命周期（新）</h3>
<ol>
<li>即将废弃3个will的生命周期钩子</li>
<li>增加两个get生命周期钩子</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%28%E6%96%B0%29.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%28%E6%96%B0%29.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%28%E6%96%B0%29.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%28%E6%96%B0%29.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F(%E6%96%B0).png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F(%E6%96%B0).png" /></p>
<ul>
<li>getDerivedStateFormProps(props,state)
<ol>
<li>props：传入的属性</li>
<li>state：当前的state</li>
<li>如果state需要派生自props，则返回props</li>
<li>==注意==：派生的state将无法更新，所以在==state的值完全取决于props时才使用该钩子==，或者在构造器中将props给state也可以</li>
</ol>
</li>
<li>getSnapshotBeforeUpdate(preprops，prestate)
<ol>
<li>preprops：传入新props之前的props</li>
<li>prestate：更新之前的state</li>
<li>返回值为componentDidUpdate的第三个参数</li>
</ol>
</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">Son</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="nx">state</span><span class="o">=</span><span class="p">{</span>
                    <span class="nx">carName</span><span class="o">:</span><span class="s1">&#39;奥迪&#39;</span>
                <span class="p">}</span>
                <span class="nx">changeCar</span><span class="o">=</span><span class="p">()=&gt;{</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">carName</span><span class="o">:</span><span class="s1">&#39;宝马&#39;</span><span class="p">})</span>
                <span class="p">}</span>
            <span class="nx">render</span><span class="p">(){</span>
                <span class="kr">const</span> <span class="p">{</span><span class="nx">carName</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
                <span class="k">return</span><span class="p">(</span>
                    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
                        <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">Son</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
                        <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">changeCar</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">换车</span><span class="o">&lt;</span><span class="err">/button&gt;</span>
                        <span class="o">&lt;</span><span class="nx">Father</span> <span class="nx">carName</span><span class="o">=</span><span class="p">{</span><span class="nx">carName</span><span class="p">}</span><span class="o">/&gt;</span>
                    <span class="o">&lt;</span><span class="err">/div&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="kr">class</span> <span class="nx">Father</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="nx">state</span><span class="o">=</span><span class="p">{</span>
                <span class="nx">name</span><span class="o">:</span><span class="s1">&#39;xj&#39;</span>
            <span class="p">}</span>
        <span class="c1">//getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的Props以及prevState来进行判断，根据新传入的props来映射到state。需要注意的是，如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾。
</span><span class="c1"></span>
            <span class="kr">static</span> <span class="nx">getDerivedStateFromProps</span><span class="p">(</span><span class="nx">props</span><span class="p">,</span><span class="nx">state</span><span class="p">){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;getDerivedStateFromProps&#39;</span><span class="p">,</span><span class="nx">props</span><span class="p">,</span><span class="nx">state</span><span class="p">);</span>
                <span class="k">return</span> <span class="kc">null</span>
            <span class="p">}</span>
  
            <span class="nx">shouldComponentUpdate</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;shouldComponentUpdate&#39;</span><span class="p">);</span>
                <span class="k">return</span> <span class="kc">true</span>
            <span class="p">}</span>
            <span class="cm">/* 在最近一次渲染输出（提交到DOM节点）之前调用。
</span><span class="cm">             它使得组件能在发生更改之前从DOM中捕获一些信息，比如列表的高度等。
</span><span class="cm">            此生命周期的任何返回值将作为第三个参数传递给componentDidUpdate()*/</span>
            <span class="nx">getSnapshotBeforeUpdate</span><span class="p">(</span><span class="nx">preProps</span><span class="p">,</span><span class="nx">preState</span><span class="p">){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;getSnapshotBeforeUpdate&#39;</span><span class="p">,</span><span class="nx">preProps</span><span class="p">,</span><span class="nx">preState</span><span class="p">);</span>
                <span class="k">return</span> <span class="s1">&#39;xqz&#39;</span>
            <span class="p">}</span>
            <span class="nx">render</span><span class="p">(){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;render&#39;</span><span class="p">);</span>
                <span class="k">return</span><span class="p">(</span>
                    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
                        <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">Father</span><span class="o">:</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">carName</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
                    <span class="o">&lt;</span><span class="err">/div&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
            <span class="nx">componentDidUpdate</span><span class="p">(</span><span class="nx">preProps</span><span class="p">,</span><span class="nx">preState</span><span class="p">,</span><span class="nx">snapshotValue</span><span class="p">){</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">preProps</span><span class="p">,</span><span class="nx">preState</span><span class="p">,</span><span class="nx">snapshotValue</span><span class="p">);</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;componentDidUpdate&#39;</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">Son</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h4 id="getsnapshotbeforeupdate的应用">getSnapshotBeforeUpdate的应用</h4>
<p>实现不断增加列表高度，但是不影响当前的浏览</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html">    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="kr">class</span> <span class="nx">NewsList</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="p">{</span>
            <span class="nx">state</span><span class="o">=</span><span class="p">{</span>
                <span class="nx">newsList</span><span class="o">:</span><span class="p">[]</span>
            <span class="p">}</span>
            <span class="nx">componentDidMount</span><span class="p">(){</span>
                <span class="nx">setInterval</span><span class="p">(()=&gt;{</span>
                    <span class="kr">const</span> <span class="p">{</span><span class="nx">newsList</span><span class="p">}</span><span class="o">=</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">newsList</span><span class="p">);</span>
                    <span class="kr">const</span> <span class="nx">news</span> <span class="o">=</span> <span class="s1">&#39;新闻&#39;</span><span class="o">+</span><span class="p">(</span><span class="nx">newsList</span><span class="p">.</span><span class="nx">length</span><span class="o">+</span><span class="mi">1</span><span class="p">)</span>
                    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">news</span><span class="p">);</span>
                    <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span><span class="nx">newList</span><span class="o">:</span><span class="nx">newsList</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span><span class="nx">news</span><span class="p">)})</span>
                <span class="p">},</span><span class="mi">500</span><span class="p">)</span>
            <span class="p">}</span>
        <span class="c1">//返回每次更新前的list内容高度
</span><span class="c1"></span>            <span class="nx">getSnapshotBeforeUpdate</span><span class="p">(){</span>
                <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">scrollHeight</span>
            <span class="p">}</span>
            <span class="nx">render</span><span class="p">(){</span>
                <span class="kr">const</span> <span class="p">{</span><span class="nx">newsList</span><span class="p">}</span><span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span>
                <span class="k">return</span> <span class="p">(</span>
                    <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s2">&#34;list&#34;</span> <span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="nx">c</span><span class="p">=&gt;</span><span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="o">=</span><span class="nx">c</span><span class="p">}</span><span class="o">&gt;</span>
                        <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
                            <span class="p">{</span><span class="nx">newsList</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">v</span><span class="p">,</span><span class="nx">i</span><span class="p">)=&gt;{</span>
                                <span class="k">return</span> <span class="o">&lt;</span><span class="nx">li</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">i</span><span class="p">}</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">v</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/li&gt;</span>
                            <span class="p">})}</span>
                        <span class="o">&lt;</span><span class="err">/ul&gt;</span>
                    <span class="o">&lt;</span><span class="err">/div&gt;</span>
                <span class="p">)</span>
            <span class="p">}</span>
            <span class="nx">componentDidUpdate</span><span class="p">(</span><span class="nx">prePorps</span><span class="p">,</span><span class="nx">preState</span><span class="p">,</span><span class="nx">snapshotValue</span><span class="p">){</span>
                <span class="c1">// 滚动的高度=已经滚动的高度+（目前的高度-更新前的高度）
</span><span class="c1"></span>                <span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">scrollTop</span> <span class="o">+=</span> <span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">scrollHeight</span><span class="o">-</span><span class="nx">snapshotValue</span>
            <span class="p">}</span>
        <span class="p">}</span>

        <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">NewsList</span><span class="o">/&gt;</span><span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;test&#39;</span><span class="p">))</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="dom的diffing算法">DOM的diffing算法</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/diffing%E7%AE%97%E6%B3%95.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/diffing%E7%AE%97%E6%B3%95.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/diffing%E7%AE%97%E6%B3%95.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/diffing%E7%AE%97%E6%B3%95.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/diffing%E7%AE%97%E6%B3%95.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/diffing%E7%AE%97%E6%B3%95.png" /></p>
<h1 id="react脚手架">React脚手架</h1>
<h2 id="项目结构">项目结构</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E8%84%9A%E6%89%8B%E6%9E%B6%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E8%84%9A%E6%89%8B%E6%9E%B6%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E8%84%9A%E6%89%8B%E6%9E%B6%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E8%84%9A%E6%89%8B%E6%9E%B6%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E8%84%9A%E6%89%8B%E6%9E%B6%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react%E8%84%9A%E6%89%8B%E6%9E%B6%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png" /></p>
<h2 id="开发流程">开发流程</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B.png" /></p>
<ol>
<li>
<p>在src目录下新建文件夹定义组件并暴露</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"></code></pre></td></tr></table>
</div>
</div></li>
</ol>
<p>// React为默认暴露，Component为分别暴露
import React,{Component} from &lsquo;react&rsquo;
import &lsquo;./Hello.css&rsquo;
export default class Hello extends Component{
render(){
return(
<h2 className="title">Hello,React!</h2>
)
}
}</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">
2. 在App.js中引入使用并暴露

```javascript
//创建外壳组件
import React,{Component} from &#39;react&#39;
import Hello from &#39;./components/Hello/Hello&#39;
import Welcome from &#39;./components/Welcome/Welcome&#39;
export default class App extends Component{
 render(){
   return(
     &lt;div&gt;
        &lt;Hello/&gt; 
        &lt;Welcome/&gt;
     &lt;/div&gt;
   ) 
 }
}
</code></pre></td></tr></table>
</div>
</div><ol start="3">
<li>
<p>在index.js中引入App，render到root跟组件</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="c1">//引入react核心库
</span><span class="c1"></span><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span>
<span class="c1">//引入reactDOM
</span><span class="c1"></span><span class="kr">import</span> <span class="nx">ReactDOM</span> <span class="nx">from</span> <span class="s1">&#39;react-dom&#39;</span><span class="p">;</span>
<span class="c1">//引入App组件
</span><span class="c1"></span><span class="kr">import</span> <span class="nx">App</span> <span class="nx">from</span> <span class="s1">&#39;./App&#39;</span><span class="p">;</span>
<span class="c1">//用于测试性能
</span><span class="c1"></span><span class="kr">import</span> <span class="nx">reportWebVitals</span> <span class="nx">from</span> <span class="s1">&#39;./reportWebVitals&#39;</span><span class="p">;</span>

<span class="c1">//渲染App到页面
</span><span class="c1"></span><span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
  <span class="o">&lt;</span><span class="nx">React</span><span class="p">.</span><span class="nx">StrictMode</span><span class="o">&gt;</span>
    <span class="o">&lt;</span><span class="nx">App</span> <span class="o">/&gt;</span>
  <span class="o">&lt;</span><span class="err">/React.StrictMode&gt;,</span>
  <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;root&#39;</span><span class="p">)</span>
<span class="p">);</span>

<span class="nx">reportWebVitals</span><span class="p">();</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h2 id="样式的模块化">样式的模块化</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A0%B7%E5%BC%8F%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A0%B7%E5%BC%8F%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A0%B7%E5%BC%8F%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A0%B7%E5%BC%8F%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A0%B7%E5%BC%8F%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A0%B7%E5%BC%8F%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96.png" /></p>
<h2 id="todolist案例">todolist案例</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/todolist%E6%A1%88%E4%BE%8B.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/todolist%E6%A1%88%E4%BE%8B.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/todolist%E6%A1%88%E4%BE%8B.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/todolist%E6%A1%88%E4%BE%8B.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/todolist%E6%A1%88%E4%BE%8B.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/todolist%E6%A1%88%E4%BE%8B.png" /></p>
<h2 id="github搜索案例">github搜索案例</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/github%E6%90%9C%E7%B4%A2.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/github%E6%90%9C%E7%B4%A2.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/github%E6%90%9C%E7%B4%A2.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/github%E6%90%9C%E7%B4%A2.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/github%E6%90%9C%E7%B4%A2.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/github%E6%90%9C%E7%B4%A2.png" /></p>
<h2 id="配置代理解决跨域">配置代理解决跨域</h2>
<h3 id="方法一">方法一</h3>
<blockquote>
<p>在package.json中追加如下配置</p>
</blockquote>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="s2">&#34;proxy&#34;</span><span class="err">:</span><span class="s2">&#34;http://localhost:5000&#34;</span>
</code></pre></td></tr></table>
</div>
</div><p>说明：</p>
<ol>
<li>优点：配置简单，前端请求资源时可以不加任何前缀。</li>
<li>缺点：不能配置多个代理。</li>
<li>工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）</li>
</ol>
<h3 id="方法二">方法二</h3>
<ol>
<li>
<p>第一步：创建代理配置文件</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback">在src下创建配置文件：src/setupProxy.js
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>编写setupProxy.js配置具体代理规则：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kr">const</span> <span class="p">{</span><span class="nx">createProxyMiddleware</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;http-proxy-middleware&#39;</span><span class="p">)</span>

<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">app</span><span class="p">)</span> <span class="p">{</span>
  <span class="nx">app</span><span class="p">.</span><span class="nx">use</span><span class="p">(</span>
    <span class="nx">createProxyMiddleware</span> <span class="p">(</span><span class="s1">&#39;/api1&#39;</span><span class="p">,</span> <span class="p">{</span>  <span class="c1">//api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
</span><span class="c1"></span>      <span class="nx">target</span><span class="o">:</span> <span class="s1">&#39;http://localhost:5000&#39;</span><span class="p">,</span> <span class="c1">//配置转发目标地址(能返回数据的服务器地址)
</span><span class="c1"></span>      <span class="nx">changeOrigin</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="c1">//控制服务器接收到的请求头中host字段的值
</span><span class="c1"></span>      <span class="cm">/*
</span><span class="cm">      	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
</span><span class="cm">      	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
</span><span class="cm">      	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
</span><span class="cm">      */</span>
      <span class="nx">pathRewrite</span><span class="o">:</span> <span class="p">{</span><span class="s1">&#39;^/api1&#39;</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">}</span> <span class="c1">//去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
</span><span class="c1"></span>    <span class="p">}),</span>
    <span class="nx">createProxyMiddleware</span> <span class="p">(</span><span class="s1">&#39;/api2&#39;</span><span class="p">,</span> <span class="p">{</span>
      <span class="nx">target</span><span class="o">:</span> <span class="s1">&#39;http://localhost:5001&#39;</span><span class="p">,</span>
      <span class="nx">changeOrigin</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
      <span class="nx">pathRewrite</span><span class="o">:</span> <span class="p">{</span><span class="s1">&#39;^/api2&#39;</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">}</span>
    <span class="p">})</span>
  <span class="p">)</span>
<span class="p">}</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<p>说明：</p>
<ol>
<li>优点：可以配置多个代理，可以灵活的控制请求是否走代理。</li>
<li>缺点：配置繁琐，前端请求资源时必须加前缀。</li>
</ol>
<h1 id="react路由">React路由</h1>
<h2 id="react-router-dom基本使用">react-router-dom基本使用</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png" /></p>
<ol>
<li>
<p>npm install react-router-dom &ndash;save</p>
</li>
<li>
<p>在index.js中引入BrowserRouter组件（histroy模式），将App组件包裹，即整个应用使用一个路由器</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span>
<span class="kr">import</span> <span class="nx">ReactDOM</span> <span class="nx">from</span> <span class="s1">&#39;react-dom&#39;</span>
<span class="kr">import</span> <span class="p">{</span><span class="nx">BrowserRouter</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react-router-dom&#39;</span>
<span class="kr">import</span> <span class="nx">App</span> <span class="nx">from</span> <span class="s1">&#39;./App&#39;</span>

<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
    <span class="p">&lt;</span><span class="nt">BrowserRouter</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">App</span><span class="p">/&gt;</span>
    <span class="p">&lt;/</span><span class="nt">BrowserRouter</span><span class="p">&gt;</span>
    <span class="p">,</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;root&#39;</span><span class="p">))</span>
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>在父组件中添加路由链接Link</p>
<ul>
<li>to：去往的路由（一般小写）</li>
</ul>
</li>
<li>
<p>在父组件中注册路由Route</p>
<ul>
<li>path：对应的路由链接</li>
<li>component：对应渲染的组件</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span>
<span class="kr">import</span> <span class="p">{</span><span class="nx">Link</span><span class="p">,</span><span class="nx">Route</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react-router-dom&#39;</span>
<span class="kr">import</span> <span class="nx">About</span> <span class="nx">from</span> <span class="s1">&#39;./components/About&#39;</span>
<span class="kr">import</span> <span class="nx">Home</span> <span class="nx">from</span> <span class="s1">&#39;./components/Home&#39;</span>
<span class="kr">class</span> <span class="nx">App</span> <span class="kr">extends</span> <span class="nx">Component</span> <span class="p">{</span>
    <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">return</span> <span class="p">(</span>
            <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">&#34;row&#34;</span><span class="p">&gt;</span>
              <span class="p">&lt;</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">&#34;col-xs-offset-2 col-xs-8&#34;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">&#34;page-header&#34;</span><span class="p">&gt;&lt;</span><span class="nt">h2</span><span class="p">&gt;</span><span class="nx">React</span> <span class="nx">Router</span> <span class="nx">Demo</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
              <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">&#34;row&#34;</span><span class="p">&gt;</span>
              <span class="p">&lt;</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">&#34;col-xs-2 col-xs-offset-2&#34;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">&#34;list-group&#34;</span><span class="p">&gt;</span>
                <span class="c1">// 路由链接
</span><span class="c1"></span>                  <span class="p">&lt;</span><span class="nt">Link</span> <span class="na">className</span><span class="o">=</span><span class="s">&#34;list-group-item active&#34;</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/about&#34;</span><span class="p">&gt;</span><span class="nx">About</span><span class="p">&lt;/</span><span class="nt">Link</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">Link</span> <span class="na">className</span><span class="o">=</span><span class="s">&#34;list-group-item&#34;</span> <span class="na">to</span><span class="o">=</span><span class="s">&#34;/home&#34;</span><span class="p">&gt;</span><span class="nx">Home</span><span class="p">&lt;/</span><span class="nt">Link</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
              <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
              <span class="p">&lt;</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">&#34;col-xs-6&#34;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">&#34;panel&#34;</span><span class="p">&gt;</span>
                  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">&#34;panel-body&#34;</span><span class="p">&gt;</span>
                  <span class="c1">//注册路由
</span><span class="c1"></span>                    <span class="p">&lt;</span><span class="nt">Route</span> <span class="na">path</span><span class="o">=</span><span class="s">&#39;/about&#39;</span> <span class="na">component</span><span class="o">=</span><span class="p">{</span><span class="nx">About</span><span class="p">}&gt;&lt;/</span><span class="nt">Route</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">Route</span> <span class="na">path</span><span class="o">=</span><span class="s">&#39;/home&#39;</span> <span class="na">component</span><span class="o">=</span><span class="p">{</span><span class="nx">Home</span><span class="p">}&gt;&lt;/</span><span class="nt">Route</span><span class="p">&gt;</span>
                  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
              <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
          <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kr">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<h2 id="路由组件与一般组件">路由组件与一般组件</h2>
<p>==注意==：</p>
<ol>
<li>只有路由组件才有histroy</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E4%B8%8E%E4%B8%80%E8%88%AC%E7%BB%84%E4%BB%B6.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E4%B8%8E%E4%B8%80%E8%88%AC%E7%BB%84%E4%BB%B6.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E4%B8%8E%E4%B8%80%E8%88%AC%E7%BB%84%E4%BB%B6.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E4%B8%8E%E4%B8%80%E8%88%AC%E7%BB%84%E4%BB%B6.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E4%B8%8E%E4%B8%80%E8%88%AC%E7%BB%84%E4%BB%B6.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E4%B8%8E%E4%B8%80%E8%88%AC%E7%BB%84%E4%BB%B6.png" /></p>
<h2 id="withrouter函数">withRouter函数</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/withrouter.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/withrouter.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/withrouter.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/withrouter.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/withrouter.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/withrouter.png" /></p>
<h2 id="navlink的使用">NavLink的使用</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/NavLink%E4%BD%BF%E7%94%A8.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/NavLink%E4%BD%BF%E7%94%A8.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/NavLink%E4%BD%BF%E7%94%A8.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/NavLink%E4%BD%BF%E7%94%A8.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/NavLink%E4%BD%BF%E7%94%A8.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/NavLink%E4%BD%BF%E7%94%A8.png" /></p>
<ol>
<li>默认的activeClassName为active</li>
<li>点击后会自动添加activeClassName</li>
</ol>
<h3 id="navlink的二次封装">NavLink的二次封装</h3>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span>
<span class="kr">import</span> <span class="p">{</span> <span class="nx">NavLink</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react-router-dom&#39;</span>
<span class="kr">class</span> <span class="nx">MyNavLink</span> <span class="kr">extends</span> <span class="nx">Component</span> <span class="p">{</span>
    <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">return</span> <span class="p">(</span>
            <span class="p">&lt;</span><span class="nt">NavLink</span> <span class="na">className</span><span class="o">=</span><span class="s">&#34;list-group-item&#34;</span> <span class="p">{</span><span class="na">...this.props</span><span class="p">}</span> <span class="p">/&gt;</span> <span class="c1">//扩展运算符将key和value都展开，包括children，值就是标签体内容
</span><span class="c1"></span>        <span class="p">)</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kr">export</span> <span class="k">default</span> <span class="nx">MyNavLink</span><span class="p">;</span>
</code></pre></td></tr></table>
</div>
</div><p>使用</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="p">&lt;</span><span class="nt">MyNavLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#39;/home&#39;</span><span class="p">&gt;</span><span class="nx">Home</span><span class="p">&lt;/</span><span class="nt">MyNavLink</span><span class="p">&gt;</span> <span class="c1">//这里标签体的内容会自动整理为标签的一个属性，key为children
</span></code></pre></td></tr></table>
</div>
</div><h2 id="switch的使用">switch的使用</h2>
<ol>
<li>不用switch组件，会依次匹配路由，效率低下</li>
<li>switch组件中，匹配到了路由后就不会再向下匹配了</li>
<li>注意：相同路径匹配第一个，不用switch会全部显示</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/switch%E7%BB%84%E4%BB%B6.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/switch%E7%BB%84%E4%BB%B6.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/switch%E7%BB%84%E4%BB%B6.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/switch%E7%BB%84%E4%BB%B6.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/switch%E7%BB%84%E4%BB%B6.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/switch%E7%BB%84%E4%BB%B6.png" /></p>
<h2 id="解决样式丢失">解决样式丢失</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%A7%A3%E5%86%B3%E6%A0%B7%E5%BC%8F%E4%B8%A2%E5%A4%B1%E9%97%AE%E9%A2%98.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%A7%A3%E5%86%B3%E6%A0%B7%E5%BC%8F%E4%B8%A2%E5%A4%B1%E9%97%AE%E9%A2%98.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%A7%A3%E5%86%B3%E6%A0%B7%E5%BC%8F%E4%B8%A2%E5%A4%B1%E9%97%AE%E9%A2%98.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%A7%A3%E5%86%B3%E6%A0%B7%E5%BC%8F%E4%B8%A2%E5%A4%B1%E9%97%AE%E9%A2%98.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%A7%A3%E5%86%B3%E6%A0%B7%E5%BC%8F%E4%B8%A2%E5%A4%B1%E9%97%AE%E9%A2%98.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%A7%A3%E5%86%B3%E6%A0%B7%E5%BC%8F%E4%B8%A2%E5%A4%B1%E9%97%AE%E9%A2%98.png" /></p>
<p>一般在路由前加上项目或者公司名，刷新后请求资源的路径变了导致请求不到css文件</p>
<ol>
<li>
<p>将&lt;link <em>rel</em>=&ldquo;stylesheet&rdquo; <em>href</em>=&quot;./js/bootstrap.css&quot;&gt;中的./改为/</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;/js/bootstrap.css&#34;</span><span class="p">&gt;</span> //不带.是指通过localhost端口号相对地址访问
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>改为</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;%PUBLIC_URL%/js/bootstrap.css&#34;</span><span class="p">&gt;</span> //绝对路径
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>将browserrouter改为hashrouter，因为#后面的不会加入请求地址中，但是不常用</p>
</li>
</ol>
<h2 id="路由的严格匹配与模糊匹配">路由的严格匹配与模糊匹配</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E4%B8%A5%E6%A0%BC%E5%8C%B9%E9%85%8D%E4%B8%8E%E6%A8%A1%E7%B3%8A%E5%8C%B9%E9%85%8D.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E4%B8%A5%E6%A0%BC%E5%8C%B9%E9%85%8D%E4%B8%8E%E6%A8%A1%E7%B3%8A%E5%8C%B9%E9%85%8D.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E4%B8%A5%E6%A0%BC%E5%8C%B9%E9%85%8D%E4%B8%8E%E6%A8%A1%E7%B3%8A%E5%8C%B9%E9%85%8D.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E4%B8%A5%E6%A0%BC%E5%8C%B9%E9%85%8D%E4%B8%8E%E6%A8%A1%E7%B3%8A%E5%8C%B9%E9%85%8D.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E4%B8%A5%E6%A0%BC%E5%8C%B9%E9%85%8D%E4%B8%8E%E6%A8%A1%E7%B3%8A%E5%8C%B9%E9%85%8D.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1%E7%9A%84%E4%B8%A5%E6%A0%BC%E5%8C%B9%E9%85%8D%E4%B8%8E%E6%A8%A1%E7%B3%8A%E5%8C%B9%E9%85%8D.png" /></p>
<h2 id="redirect组件的使用">Redirect组件的使用</h2>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx">                  <span class="c1">//注册路由
</span><span class="c1"></span>                  <span class="p">&lt;</span><span class="nt">Switch</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">Route</span> <span class="na">exact</span> <span class="na">path</span><span class="o">=</span><span class="s">&#39;/test/about&#39;</span> <span class="na">component</span><span class="o">=</span><span class="p">{</span><span class="nx">About</span><span class="p">}&gt;&lt;/</span><span class="nt">Route</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">Route</span> <span class="na">path</span><span class="o">=</span><span class="s">&#39;/test/home&#39;</span> <span class="na">component</span><span class="o">=</span><span class="p">{</span><span class="nx">Home</span><span class="p">}&gt;&lt;/</span><span class="nt">Route</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">Redirect</span> <span class="na">to</span><span class="o">=</span><span class="s">&#39;/test/about&#39;</span><span class="p">/&gt;</span> <span class="c1">// 匹配不到时跳转
</span><span class="c1"></span>                  <span class="p">&lt;/</span><span class="nt">Switch</span><span class="p">&gt;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="嵌套路由">嵌套路由</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1.png" /></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span>
<span class="kr">import</span> <span class="p">{</span> <span class="nx">Route</span> <span class="p">,</span><span class="nx">Redirect</span><span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react-router-dom&#39;</span>
<span class="kr">import</span> <span class="nx">MyNavLink</span> <span class="nx">from</span> <span class="s1">&#39;../../components/MyNavLink&#39;</span>
<span class="kr">import</span> <span class="nx">News</span> <span class="nx">from</span> <span class="s1">&#39;./News&#39;</span>
<span class="kr">import</span> <span class="nx">Message</span> <span class="nx">from</span> <span class="s1">&#39;./Message&#39;</span>
<span class="kr">class</span> <span class="nx">index</span> <span class="kr">extends</span> <span class="nx">Component</span> <span class="p">{</span>
    <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">return</span> <span class="p">(</span>
            <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span><span class="nx">Home组件内容</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;nav nav-tabs&#34;</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">MyNavLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#39;/test/home/news&#39;</span><span class="p">&gt;</span><span class="nx">News</span><span class="p">&lt;/</span><span class="nt">MyNavLink</span><span class="p">&gt;</span>
                        <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">MyNavLink</span> <span class="na">to</span><span class="o">=</span><span class="s">&#39;/test/home/message&#39;</span><span class="p">&gt;</span><span class="nx">message</span><span class="p">&lt;/</span><span class="nt">MyNavLink</span><span class="p">&gt;</span>
                        <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                        <span class="p">{</span><span class="cm">/* 注册路由 二级路由 一级路由为/test/home*/</span><span class="p">}</span>
                        <span class="p">&lt;</span><span class="nt">Route</span> <span class="na">path</span><span class="o">=</span><span class="s">&#39;/test/home/news&#39;</span> <span class="na">component</span><span class="o">=</span><span class="p">{</span><span class="nx">News</span><span class="p">}/&gt;</span>
                        <span class="p">&lt;</span><span class="nt">Route</span> <span class="na">path</span><span class="o">=</span><span class="s">&#39;/test/home/message&#39;</span> <span class="na">component</span><span class="o">=</span><span class="p">{</span><span class="nx">Message</span><span class="p">}&gt;&lt;/</span><span class="nt">Route</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">Redirect</span> <span class="na">to</span><span class="o">=</span><span class="s">&#39;/test/home/news&#39;</span><span class="p">/&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kr">export</span> <span class="k">default</span> <span class="nx">index</span><span class="p">;</span>
</code></pre></td></tr></table>
</div>
</div><h2 id="路由传参">路由传参</h2>
<p>传递&ndash;&gt;声名接收&ndash;&gt;接收</p>
<h3 id="params参数">params参数</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1params%E5%8F%82%E6%95%B0.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1params%E5%8F%82%E6%95%B0.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1params%E5%8F%82%E6%95%B0.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1params%E5%8F%82%E6%95%B0.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1params%E5%8F%82%E6%95%B0.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%B7%AF%E7%94%B1params%E5%8F%82%E6%95%B0.png" /></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span>
<span class="kr">import</span> <span class="p">{</span> <span class="nx">Link</span><span class="p">,</span> <span class="nx">Route</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react-router-dom&#39;</span>
<span class="kr">import</span> <span class="nx">Detail</span> <span class="nx">from</span> <span class="s1">&#39;./Detail&#39;</span>
<span class="kr">const</span> <span class="nx">messageArr</span> <span class="o">=</span> <span class="p">[</span>
    <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;消息1&#39;</span> <span class="p">},</span>
    <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;消息2&#39;</span> <span class="p">},</span>
    <span class="p">{</span> <span class="nx">id</span><span class="o">:</span> <span class="mi">3</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span> <span class="s1">&#39;消息3&#39;</span> <span class="p">},</span>
<span class="p">]</span>
<span class="kr">class</span> <span class="nx">Message</span> <span class="kr">extends</span> <span class="nx">Component</span> <span class="p">{</span>
    <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">return</span> <span class="p">(</span>
            <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
                    <span class="p">{</span><span class="nx">messageArr</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">v</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
                        <span class="k">return</span> <span class="p">&lt;</span><span class="nt">li</span> <span class="na">key</span><span class="o">=</span><span class="p">{</span><span class="nx">v</span><span class="p">.</span><span class="nx">id</span><span class="p">}&gt;</span>
                           <span class="c1">//传递参数
</span><span class="c1"></span>                            <span class="p">&lt;</span><span class="nt">Link</span> <span class="na">to</span><span class="o">=</span><span class="p">{</span><span class="sb">`/test/home/message/detail/</span><span class="si">${</span><span class="nx">v</span><span class="p">.</span><span class="nx">id</span><span class="si">}</span><span class="sb">/</span><span class="si">${</span><span class="nx">v</span><span class="p">.</span><span class="nx">title</span><span class="si">}</span><span class="sb">`</span><span class="p">}&gt;{</span><span class="nx">v</span><span class="p">.</span><span class="nx">title</span><span class="p">}&lt;/</span><span class="nt">Link</span><span class="p">&gt;</span>
                        <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                    <span class="p">})}</span>
                <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
                <span class="c1">// 声名接收参数
</span><span class="c1"></span>                <span class="p">&lt;</span><span class="nt">Route</span> <span class="na">path</span><span class="o">=</span><span class="p">{</span><span class="sb">`/test/home/message/detail/:id/:title`</span><span class="p">}</span> <span class="na">component</span><span class="o">=</span><span class="p">{</span><span class="nx">Detail</span><span class="p">}</span> <span class="p">/&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kr">export</span> <span class="k">default</span> <span class="nx">Message</span><span class="p">;</span>
</code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">contentArr</span> <span class="o">=</span><span class="p">[</span>
    <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span><span class="nx">content</span><span class="o">:</span><span class="s1">&#39;内容1&#39;</span><span class="p">},</span>
    <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span><span class="nx">content</span><span class="o">:</span><span class="s1">&#39;内容2&#39;</span><span class="p">},</span>
    <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">3</span><span class="p">,</span><span class="nx">content</span><span class="o">:</span><span class="s1">&#39;内容3&#39;</span><span class="p">}</span>
<span class="p">]</span>
<span class="kr">class</span> <span class="nx">Detail</span> <span class="kr">extends</span> <span class="nx">Component</span> <span class="p">{</span>
    <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
        <span class="c1">// 接收参数
</span><span class="c1"></span>        <span class="kr">const</span> <span class="nx">params</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">match</span><span class="p">.</span><span class="nx">params</span>
        <span class="kr">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">contentArr</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">v</span><span class="p">=&gt;{</span>
            <span class="k">return</span> <span class="nx">v</span><span class="p">.</span><span class="nx">id</span><span class="o">==</span><span class="nx">params</span><span class="p">.</span><span class="nx">id</span>
        <span class="p">})</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">result</span><span class="p">);</span>
        <span class="k">return</span> <span class="p">(</span>
            <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">ID</span><span class="o">:</span><span class="p">{</span><span class="nx">params</span><span class="p">.</span><span class="nx">id</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">Title</span><span class="o">:</span><span class="p">{</span><span class="nx">params</span><span class="p">.</span><span class="nx">title</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">Content</span><span class="o">:</span><span class="p">{</span><span class="nx">result</span><span class="p">.</span><span class="nx">content</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kr">export</span> <span class="k">default</span> <span class="nx">Detail</span><span class="p">;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="search参数">search参数</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/searchcanshu%20.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/searchcanshu%20.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/searchcanshu%20.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/searchcanshu%20.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/searchcanshu%20.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/searchcanshu%20.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/search%E5%8F%82%E6%95%B0.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/search%E5%8F%82%E6%95%B0.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/search%E5%8F%82%E6%95%B0.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/search%E5%8F%82%E6%95%B0.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/search%E5%8F%82%E6%95%B0.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/search%E5%8F%82%E6%95%B0.png" /></p>
<p>接收参数使用querystring模块</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span><span class="p">;</span>
<span class="kr">import</span> <span class="nx">qs</span> <span class="nx">from</span> <span class="s1">&#39;querystring&#39;</span><span class="c1">//引入模块，stringlify把对象变成urlencoded编码，parse把urlencoded编码变成对象
</span><span class="c1"></span><span class="kr">const</span> <span class="nx">contentArr</span> <span class="o">=</span><span class="p">[</span>
    <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span><span class="nx">content</span><span class="o">:</span><span class="s1">&#39;内容1&#39;</span><span class="p">},</span>
    <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span><span class="nx">content</span><span class="o">:</span><span class="s1">&#39;内容2&#39;</span><span class="p">},</span>
    <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">3</span><span class="p">,</span><span class="nx">content</span><span class="o">:</span><span class="s1">&#39;内容3&#39;</span><span class="p">}</span>
<span class="p">]</span>
<span class="kr">class</span> <span class="nx">Detail</span> <span class="kr">extends</span> <span class="nx">Component</span> <span class="p">{</span>
    <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
        <span class="kr">const</span> <span class="p">{</span><span class="nx">search</span><span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">location</span>
        <span class="kr">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">qs</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">search</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">))</span>
        <span class="kr">const</span> <span class="p">{</span><span class="nx">content</span><span class="p">}</span> <span class="o">=</span> <span class="nx">contentArr</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">v</span><span class="p">=&gt;{</span>
            <span class="k">return</span> <span class="nx">v</span><span class="p">.</span><span class="nx">id</span><span class="o">==</span><span class="nx">result</span><span class="p">.</span><span class="nx">id</span>
        <span class="p">})</span>
        <span class="k">return</span> <span class="p">(</span>
            <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">ID</span><span class="o">:</span><span class="p">{</span><span class="nx">result</span><span class="p">.</span><span class="nx">id</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">Title</span><span class="o">:</span><span class="p">{</span><span class="nx">result</span><span class="p">.</span><span class="nx">title</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">Content</span><span class="o">:</span><span class="p">{</span><span class="nx">content</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kr">export</span> <span class="k">default</span> <span class="nx">Detail</span><span class="p">;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="state参数">state参数</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/state%E5%8F%82%E6%95%B0.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/state%E5%8F%82%E6%95%B0.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/state%E5%8F%82%E6%95%B0.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/state%E5%8F%82%E6%95%B0.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/state%E5%8F%82%E6%95%B0.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/state%E5%8F%82%E6%95%B0.png" /></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-jsx" data-lang="jsx"><span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;react&#39;</span>
<span class="kr">import</span> <span class="nx">qs</span> <span class="nx">from</span> <span class="s1">&#39;querystring&#39;</span>
<span class="kr">const</span> <span class="nx">contentArr</span> <span class="o">=</span><span class="p">[</span>
    <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">1</span><span class="p">,</span><span class="nx">content</span><span class="o">:</span><span class="s1">&#39;内容1&#39;</span><span class="p">},</span>
    <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">2</span><span class="p">,</span><span class="nx">content</span><span class="o">:</span><span class="s1">&#39;内容2&#39;</span><span class="p">},</span>
    <span class="p">{</span><span class="nx">id</span><span class="o">:</span><span class="mi">3</span><span class="p">,</span><span class="nx">content</span><span class="o">:</span><span class="s1">&#39;内容3&#39;</span><span class="p">}</span>
<span class="p">]</span>
<span class="kr">class</span> <span class="nx">Detail</span> <span class="kr">extends</span> <span class="nx">Component</span> <span class="p">{</span>
    <span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
        <span class="kr">const</span> <span class="nx">state</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">state</span> <span class="o">||</span> <span class="p">{}</span> <span class="c1">//刷新是可以保留参数的，因为是history模式，location是histroy的一个属性，防止清除缓存后报错
</span><span class="c1"></span>        
        <span class="kr">const</span> <span class="p">{</span><span class="nx">content</span><span class="p">}</span> <span class="o">=</span> <span class="nx">contentArr</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">v</span><span class="p">=&gt;{</span>
            <span class="k">return</span> <span class="nx">v</span><span class="p">.</span><span class="nx">id</span><span class="o">==</span><span class="nx">state</span><span class="p">.</span><span class="nx">id</span>
        <span class="p">})</span> <span class="o">||</span> <span class="p">{}</span> <span class="c1">//同理
</span><span class="c1"></span>        <span class="k">return</span> <span class="p">(</span>
            <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">ID</span><span class="o">:</span><span class="p">{</span><span class="nx">state</span><span class="p">.</span><span class="nx">id</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">Title</span><span class="o">:</span><span class="p">{</span><span class="nx">state</span><span class="p">.</span><span class="nx">title</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span><span class="nx">Content</span><span class="o">:</span><span class="p">{</span><span class="nx">content</span><span class="p">}&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kr">export</span> <span class="k">default</span> <span class="nx">Detail</span><span class="p">;</span>
</code></pre></td></tr></table>
</div>
</div><h3 id="区别">区别</h3>
<ol>
<li>state的参数看不到，params和search参数可以在地址上看到</li>
<li>params参数需要声名接收，其他两个不需要</li>
<li>search参数在接收时需要querystring模块进行解析</li>
<li>三种方法传递的写法都不同，但是都可以写成对象</li>
</ol>
<h2 id="push与replace">push与replace</h2>
<ol>
<li>push有历史记录</li>
<li>在link标签加上replace属性，就没有历史记录</li>
</ol>
<h2 id="编程式路由导航">编程式路由导航</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8D%81%E4%B8%80.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8D%81%E4%B8%80.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8D%81%E4%B8%80.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8D%81%E4%B8%80.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8D%81%E4%B8%80.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%8D%81%E4%B8%80.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E6%8E%A5%E6%94%B6.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E6%8E%A5%E6%94%B6.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E6%8E%A5%E6%94%B6.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E6%8E%A5%E6%94%B6.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E6%8E%A5%E6%94%B6.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E6%8E%A5%E6%94%B6.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA.png" /></p>
<p>BrowserRouter与HashRouter的区别</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/browserRouter%E4%B8%8EHashRouter%E7%9A%84%E5%8C%BA%E5%88%AB.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/browserRouter%E4%B8%8EHashRouter%E7%9A%84%E5%8C%BA%E5%88%AB.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/browserRouter%E4%B8%8EHashRouter%E7%9A%84%E5%8C%BA%E5%88%AB.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/browserRouter%E4%B8%8EHashRouter%E7%9A%84%E5%8C%BA%E5%88%AB.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/browserRouter%E4%B8%8EHashRouter%E7%9A%84%E5%8C%BA%E5%88%AB.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/browserRouter%E4%B8%8EHashRouter%E7%9A%84%E5%8C%BA%E5%88%AB.png" /></p>
<h1 id="redux">Redux</h1>
<h2 id="流程">流程</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E5%8E%9F%E7%90%86%E5%9B%BE.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E5%8E%9F%E7%90%86%E5%9B%BE.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E5%8E%9F%E7%90%86%E5%9B%BE.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E5%8E%9F%E7%90%86%E5%9B%BE.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E5%8E%9F%E7%90%86%E5%9B%BE.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E5%8E%9F%E7%90%86%E5%9B%BE.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E6%B1%82%E5%92%8C.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E6%B1%82%E5%92%8C.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E6%B1%82%E5%92%8C.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E6%B1%82%E5%92%8C.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E6%B1%82%E5%92%8C.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E6%B1%82%E5%92%8C.png" /></p>
<ol>
<li>首先createStore去创建一个store，传入一个为其服务的reducer，并暴露</li>
<li>reducer是函数，接收prestate和action，action为对象，有type和data，返回加工后的状态</li>
<li>需要一个文件作为actioncreator，用于返回action对象</li>
<li>然后调用store实例的dispatch方法，让为这个store服务的reducer进行加工数据后返回</li>
</ol>
<h2 id="异步action">异步action</h2>
<p>返回的是一个函数</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%BC%82%E6%AD%A5action.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%BC%82%E6%AD%A5action.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%BC%82%E6%AD%A5action.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%BC%82%E6%AD%A5action.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%BC%82%E6%AD%A5action.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E5%BC%82%E6%AD%A5action.png" /></p>
<p>此时会报错，因为dispatch中需要一个action对象，而不是一个函数，</p>
<p>需要redux-thunk</p>
<h2 id="redux-thunk">redux-thunk</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux-thunk.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux-thunk.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux-thunk.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux-thunk.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux-thunk.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux-thunk.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B1%82%E5%92%8C%E5%BC%82%E6%AD%A5.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B1%82%E5%92%8C%E5%BC%82%E6%AD%A5.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B1%82%E5%92%8C%E5%BC%82%E6%AD%A5.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B1%82%E5%92%8C%E5%BC%82%E6%AD%A5.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B1%82%E5%92%8C%E5%BC%82%E6%AD%A5.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B1%82%E5%92%8C%E5%BC%82%E6%AD%A5.png" /></p>
<h2 id="react-redux">react-redux</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E6%A8%A1%E5%9E%8B%E5%9B%BE.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E6%A8%A1%E5%9E%8B%E5%9B%BE.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E6%A8%A1%E5%9E%8B%E5%9B%BE.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E6%A8%A1%E5%9E%8B%E5%9B%BE.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E6%A8%A1%E5%9E%8B%E5%9B%BE.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E6%A8%A1%E5%9E%8B%E5%9B%BE.png" /></p>
<h3 id="react-redux的基本使用">React-redux的基本使用</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E3%80%81.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E3%80%81.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E3%80%81.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E3%80%81.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E3%80%81.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E3%80%81.png" /></p>
<h3 id="容器中连接store和ui组件">容器中连接store和ui组件</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux1.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux1.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux1.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux1.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux1.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux1.png" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux2.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux2.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux2.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux2.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux2.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux2.png" /></p>
<p>==注意==：在APP.jsx中，直接使用容器组件，并通过props的方式传递store</p>
<h3 id="ui组件中使用">ui组件中使用</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ui%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8react-redux.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ui%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8react-redux.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ui%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8react-redux.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ui%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8react-redux.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ui%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8react-redux.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/ui%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8react-redux.png" /></p>
<h3 id="流程总结">流程总结：</h3>
<ol>
<li>首先redux需要，constant，action，reducer，store文件；一个component需要一个container文件</li>
<li>container用于连接component和store，store通过属性传递，component文件引入</li>
<li>react-redux中有connect函数，将ui和store连接，第一个参数mapStateToProps（一个function）返回state，第二个mapDispatchToPsops返回操作state的方法dispatch，返回类型都是对象，相当于返回到props中了</li>
<li>component通过属性（来自connect绑定的constainer）调用store中的state或者方法</li>
<li>因为dispatch中需要一个action对象，所以到达action文件进行创建，然后dispatch执行，调用action的type在reducer中对应的操作</li>
<li>action和reducer中使用constant文件</li>
</ol>
<h3 id="优化">优化</h3>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E4%BC%98%E5%8C%96.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E4%BC%98%E5%8C%96.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E4%BC%98%E5%8C%96.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E4%BC%98%E5%8C%96.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E4%BC%98%E5%8C%96.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/react-redux%E4%BC%98%E5%8C%96.png" /></p>
<p>1.react-redux的dispatch可以写成对象的简写形式</p>
<ol>
<li>component中调用了jia后，相当于调用action中的increment方法，参数通过increment传递</li>
<li>然后react-redux会自动帮我们分发dispatch</li>
</ol>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BC%98%E5%8C%96.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BC%98%E5%8C%96.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BC%98%E5%8C%96.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BC%98%E5%8C%96.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BC%98%E5%8C%96.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BC%98%E5%8C%96.png" /></p>
<p>2.使用react-redux不用监听storer的变化</p>
<p>3.provider组件包裹APP可以将所有的容器组件都拥有store</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/provider.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/provider.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/provider.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/provider.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/provider.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/provider.png" /></p>
<p>4.整合ui组件与容器组件</p>
<p>将ui组件的定义写在容器组件中</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B4%E5%90%88.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B4%E5%90%88.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B4%E5%90%88.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B4%E5%90%88.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B4%E5%90%88.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B4%E5%90%88.png" /></p>
<h2 id="数据共享">数据共享</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%AC%E4%BA%AB.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%AC%E4%BA%AB.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%AC%E4%BA%AB.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%AC%E4%BA%AB.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%AC%E4%BA%AB.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%AC%E4%BA%AB.png" /></p>
<p>combineReducers中的对象就是redux的store中最终保存的数据结构</p>
<p>==流程==</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.png" /></p>
<ol>
<li>
<p>首先将redux中分文件夹建立action和reducer</p>
</li>
<li>
<p>在strore中将reducers整合</p>
</li>
<li>
<p>在使用时获取需要的state</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB%E4%BD%BF%E7%94%A8.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB%E4%BD%BF%E7%94%A8.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB%E4%BD%BF%E7%94%A8.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB%E4%BD%BF%E7%94%A8.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB%E4%BD%BF%E7%94%A8.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB%E4%BD%BF%E7%94%A8.png" /></p>
</li>
</ol>
<h2 id="纯函数">纯函数</h2>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BA%AF%E5%87%BD%E6%95%B0.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BA%AF%E5%87%BD%E6%95%B0.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BA%AF%E5%87%BD%E6%95%B0.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BA%AF%E5%87%BD%E6%95%B0.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BA%AF%E5%87%BD%E6%95%B0.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BA%AF%E5%87%BD%E6%95%B0.png" /></p>
<h2 id="redux开发者工具">redux开发者工具</h2>
<p>npm i redux-devtools-extension</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7.png"
        data-srcset="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7.png, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7.png 1.5x, https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7.png 2x"
        data-sizes="auto"
        alt="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7.png"
        title="https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/redux%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7.png" /></p>
<h1 id="常用库">常用库</h1>
<h2 id="nanoid">nanoid</h2>
<p>生成唯一的uuid</p>
<ol>
<li>npm install nanoid &ndash;save</li>
<li>import {nanoid} from &lsquo;nanoid&rsquo;</li>
<li>nanoid()函数的返回值是唯一的uuid</li>
</ol>
<h2 id="pubsub-js">pubsub-js</h2>
<p>兄弟组件通信</p>
<ol>
<li>npm install pubsub-js &ndash;save</li>
<li>import PubSub from &lsquo;pubsub-js&rsquo; //引入</li>
<li>PubSub.subscribe(&lsquo;delete&rsquo;, function(data){ }); //订阅</li>
<li>PubSub.publish(&lsquo;delete&rsquo;, data) //发布消息</li>
</ol>
<h2 id="antd">antd</h2>
<p>npm install antd &ndash;save</p>
<p>按需引入</p>
<ol>
<li>npm install react-app-rewired customize-cra babel-plugin-import &ndash;save</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="kr">const</span> <span class="p">{</span><span class="nx">override</span><span class="p">,</span> <span class="nx">fixBabelImports</span><span class="p">}</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;customize-cra&#39;</span><span class="p">)</span>

<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">override</span><span class="p">(</span>
  <span class="c1">// 根据import（使用babel-plugin-import包）实现按需引入样式
</span><span class="c1"></span>  <span class="nx">fixBabelImports</span><span class="p">(</span><span class="s1">&#39;import&#39;</span><span class="p">,</span> <span class="p">{</span>
    <span class="nx">libraryName</span><span class="o">:</span> <span class="s1">&#39;antd&#39;</span><span class="p">,</span>
    <span class="nx">libraryDirectory</span><span class="o">:</span> <span class="s1">&#39;es&#39;</span><span class="p">,</span>
    <span class="nx">style</span><span class="o">:</span> <span class="s1">&#39;css&#39;</span><span class="p">,</span>
  <span class="p">})</span>
<span class="p">)</span>
</code></pre></td></tr></table>
</div>
</div><p>看文档</p>
<h2 id="store">store</h2>
<p>用于在localstorage中进行存储，解决浏览器兼容性问题</p>
<h2 id="react-router-dom">react-router-dom</h2>
<p>路由组件</p>
<h2 id="redux-1">redux</h2>
<p>状态化管理</p>
<h2 id="redux-thunk-1">redux-thunk</h2>
<p>异步action</p>
<h2 id="react-redux-1">react-redux</h2>
<p>连接ui组件与redux</p>
<h1 id="项目相关">项目相关</h1>
<h2 id="登录状态保持和权限验证">登录状态保持和权限验证</h2>
<ol>
<li>登录成功将用户信息存入localstorage，并通过reducer更新redux中的store，用了react-redux后一旦store更新，组件也会更新</li>
<li>在以及路由组件的render中判断如果store中用户存在，直接跳转至相应页面，否则Redirect至登录</li>
</ol>
</div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-08-15</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"><span>
                            <a class="link-to-markdown" href="/posts/react/index.md" target="_blank">阅读原始文档</a>
                        </span></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="http://example.org/posts/react/" data-title="react" data-via="xxxx" data-hashtags="react,react路由,redux"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="http://example.org/posts/react/" data-hashtag="react"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 WhatsApp" data-sharer="whatsapp" data-url="http://example.org/posts/react/" data-title="react" data-web><i class="fab fa-whatsapp fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="http://example.org/posts/react/" data-title="react"><i data-svg-src="/lib/simple-icons/icons/line.min.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="http://example.org/posts/react/" data-title="react"><i class="fab fa-weibo fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Myspace" data-sharer="myspace" data-url="http://example.org/posts/react/" data-title="react" data-description=""><i data-svg-src="/lib/simple-icons/icons/myspace.min.svg"></i></a><a href="javascript:void(0);" title="分享到 Blogger" data-sharer="blogger" data-url="http://example.org/posts/react/" data-title="react" data-description=""><i class="fab fa-blogger fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Evernote" data-sharer="evernote" data-url="http://example.org/posts/react/" data-title="react"><i class="fab fa-evernote fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/react/">react</a>,&nbsp;<a href="/tags/react%E8%B7%AF%E7%94%B1/">react路由</a>,&nbsp;<a href="/tags/redux/">redux</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/posts/webpack/" class="prev" rel="prev" title="webpack"><i class="fas fa-angle-left fa-fw"></i>webpack</a>
            <a href="/posts/react&#43;ts/" class="next" rel="next" title="react&#43;ts">react&#43;ts<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
<div id="comments"></div></article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.89.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="https://github.com/yzuxqz" target="_blank">yzuxqz</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="/lib/katex/katex.min.css"><link rel="stylesheet" href="/lib/katex/copy-tex.min.css"><script type="text/javascript" src="/lib/smooth-scroll/smooth-scroll.min.js"></script><script type="text/javascript" src="/lib/lazysizes/lazysizes.min.js"></script><script type="text/javascript" src="/lib/clipboard/clipboard.min.js"></script><script type="text/javascript" src="/lib/sharer/sharer.min.js"></script><script type="text/javascript" src="/lib/katex/katex.min.js"></script><script type="text/javascript" src="/lib/katex/auto-render.min.js"></script><script type="text/javascript" src="/lib/katex/copy-tex.min.js"></script><script type="text/javascript" src="/lib/katex/mhchem.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"math":{"delimiters":[{"display":true,"left":"$$","right":"$$"},{"display":true,"left":"\\[","right":"\\]"},{"display":false,"left":"$","right":"$"},{"display":false,"left":"\\(","right":"\\)"}],"strict":false}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
